Таблица HTML: установите ширину для второго столбца с помощью CSS

Ответ 1

В таблицах HTML действительно нет "столбцов" - строки имеют только первые ячейки, по крайней мере, до разметки. Однако вы можете сделать что-то вроде селекторов CSS:

Учитывая следующую разметку:

<table>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
</table>

CSS

table tr td             { width: 20em; }
table tr td:first-child { width: 10em; }

Это установило бы ширину первого "столбца" на 10em, а все остальные столбцы - на 20em.

Возможно, вы захотите рассмотреть поддержку браузера для :first-child. Альтернативой является добавление класса к первому <td> в каждом <tr> (он, похоже, хорошо поддерживается всеми крупными браузерами, отличными от IE6).

Ответ 2

Любой из них будет работать:

td:not(:first-child) {
    width: 20%;
}

td:nth-child(n+2) {
    width: 20%;
}

Оба примера работают в IE9 +

Демо

Ответ 3

Используя CSS2.1, я не знаю о каком-либо возможном селекторе, чтобы сделать это.

Однако CSS3 имеет селектор not(), поэтому, если вы дадите свой первый столбец классу, вы можете использовать селектор td:not(.your_class)