CSS nested nth-child() sta agendo strano

Sto provando a creare una semplice griglia 3x3 (utilizzando <table>) con tutte le celle con un bordo 1px. Se uso semplicemente i CSS per assegnare a tutti gli elementi <td> un bordo 1px, i bordi interni si impilano e creano il bordo 2px, quindi sto trattando ogni <td> in modo diverso. Sono riuscito a farlo in questo modo e ho usato il bambino nth per ridurre il CSS. Tuttavia, la mia domanda è perché un certo modo logico che utilizza anche meno selettori CSS non funziona.CSS nested nth-child() sta agendo strano

Ecco il mio HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>3x3 grid</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<table> 
    <tr> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
</table> 
</body> 
</html>

Ecco il CSS che funziona:

td{ 
    border: 1px #000; 
    width:30px; 
    height: 30px; 
    text-align: center; 
    border-style: solid; 
} 
tr:nth-child(2) td{ 
    border-top: 0px; 
} 
tr:nth-child(3) td{ 
    border-top: 0px 
} 
td:nth-child(1){ 
    border-right: 0px; 
} 
td:nth-child(3){ 
    border-left: 0px; 
} 
table{ 
    border-spacing: 0px; 
    border-collapse: separate; 
}

Ecco il CSS che utilizza uno meno del selettore e dovrebbe funzionare ma in qualche modo tutte le cellule superiori finire con nessun fronti superiori.

td{ 
    border: 1px #000; 
    border-top: 0px; 
    width:30px; 
    height: 30px; 
    text-align: center; 
    border-style: solid; 
} 
tr:nth-child(1) td{ 
    border-top: 1px; 
} 
td:nth-child(1){ 
    border-right: 0px; 
} 
td:nth-child(3){ 
    border-left: 0px; 
} 
table{ 
    border-spacing: 0px; 
    border-collapse: separate; 
}

L'ho provato con Safari e Firefox. Per favore, dimmi se c'è un modo migliore per farlo.

fonte

2015-10-02 Mazen

La ragione per cui non si ha il bordo superiore 's tuoi td è perché non si stiano dichiarando un border-style o border-color ...

tr:nth-child(1) td{ 
    border-top: 1px; 
}

dovrebbe essere ...

tr:nth-child(1) td{ 
    border-top: 1px solid #000; 
}

È potrebbe semplificare notevolmente semplicemente usando border-collapse: collapse

td{ 
 
    border: 1px #000; 
 
    width:30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    border-style: solid; 
 
} 
 

 
table{ 
 
    border-collapse: collapse; 
 
}

<table> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
</table>

fonte

2015-10-02 12:05:05 Turnip

Non so perché, ma td 's in prima fila sono cambiato da solido a nessuno. Prova a utilizzare:

tr:nth-child(1) td{ 
    border-top: solid black 1px; 
}

in CSS e dovrebbe avere ragione. http://jsfiddle.net/u1d1ctcy/

fonte

2015-10-02 12:30:40

Si può semplicemente farlo da solo codice qui sotto:

<style> 
    table { 
     border-collapse: collapse; 
      } 

    table, td, th { 
     border: 1px solid black; 
     } 
</style>

fonte

2015-10-16 17:56:11

CSS nested nth-child() sta agendo strano

risposta

Problemi correlati