Es gibt eine Tabelle, die 3 Spalten enthält. Jetzt möchte ich die erste Spalte 100px Breite, die zweite Spalte 200px und die letzte Spalte 300px festlegen.
Es ist peinlich, alle td mit einer ID zu setzen, die angibt, welche Spalten es ist.
Gibt es einen weiseren Weg zu tun?Wie man unterschiedliche Spalte in der Tabelle einstellt, um unterschiedliche Breite in css zu sein?
Angenommen, Ihre Tabelle verfügt über Standard-Markup, können Sie nth-child oder nth-of-type verwenden, um bestimmte Zellen in jeder Zeile zu zielen. Sie können eine beliebige Nummer in nth-child ersetzen, wenn Ihre Tabelle mehr Spalten enthält.
/* nth-child(1) = the first td in each tr */
td:nth-child(1) {
width: 100px;
background: #ddd;
}
/* the second */
td:nth-child(2) {
width: 200px;
background: #ccc;
}
/* the third */
td:nth-child(3) {
width: 300px;
background: #bbb;
}<table>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</tbody>
</table>Sie können nth-child, dies zu tun:
table tr td {
padding:0;
}
table tr td:nth-child(1) {
width:100px;
}
table tr td:nth-child(2) {
width:200px;
}
table tr td:nth-child(3) {
width:300px;
}<table>
<tr>
<td>100px</td>
<td>200px</td>
<td>300px</td>
</tr>
</table>Hinweis: Die Säulen sind breiter als die definierte Breite auf CSS, weil es eine cellpadding Standard ist. Um das Padding zu entfernen, können Sie die zusätzliche CSS-Regel verwenden (in diesem Beispiel die Regel
table tr td).
Sie können diese n-te-Kind mit in CSS tun:
#myTable tr td {
border: 1px solid #000;
}
#myTable tr td:first-child {
width: 100px;
}
#myTable tr td:nth-child(2) {
width: 200px;
}
#myTable tr td:last-child {
width: 300px;
}<table id="myTable">
<tr>
<td>100px</td>
<td>200px</td>
<td>300px</td>
</tr>
</table>Wenn es mehr als 3 Spalten ist können Sie nur n-Kind angeben (x) ..
Hast du Element Versuchen Sie es mit: last-child {...} Wähler? – Robert