Селектор CSS для выбора первой и второй ячеек таблицы

Question

Может кто-нибудь помочь мне определить, какие селектора мне нужно изменить ширину моих столбцов глобально на моей таблице двух столбцов?

Используя это, будет, конечно, выбрать все ячейки:

table td { 
    width: 50px; 
} 

То, что я хочу это:

<table> 
    <tr> 
     <td style="width: 50px">data in first column</td> 
     <td style="width: 180px">data in second column</td> 
    </tr> 
    <tr> 
     <td style="width: 50px">more data in first column</td> 
     <td style="width: 180px">more data in second column</td> 
    </tr> 
</table> 

Я хотел бы поставить спецификацию ширины в таблице стилей, а затем ввести ширина неявно для каждого тега. Какой CSS-селектор позволит мне установить ширину 50 пикселей и 180 пикселей соответственно?

Answer 1

Да.

td:first-child{ 
    width:50px; 
} 

td:nth-child(2){ 
    width: 180px; 
} 

или, как это было предложено редактировать Brainslav в:

td:nth-child(1) { 
     width: 50px;} 
td:nth-child(2) { 
     width: 180px;} 

link

Answer 2

Попробуйте использовать class имена в разметке и использования colgroup. Это, безусловно, наименьшая проблема, поскольку вы определяете ширину только в colgroup и совместимы с кросс-браузером.

Например.

<table> 
    <colgroup> 
     <col class="colOne" /> 
     <col class="colTwo" /> 
    </colgroup> 
    <tr> 
     <td>data in first column</td> 
     <td>data in second column</td> 
    </tr> 
    <tr> 
     <td>more data in first column</td> 
     <td>more data in second column</td> 
    </tr> 
</table> 

/* CSS */ 

.colOne{ 
    width: 50px; 
} 
.colTwo{ 
    width: 180px; 
} 

См скрипку: http://jsfiddle.net/4ebnE/

Одна вещь, хотя, colgroup осуждается в HTML5. Но опять же HTML5 еще не стандартизирован, поэтому вы можете позвонить.

О, и это можно сделать без каких-либо CSS, если вы представляете:

<table> 
    <colgroup> 
     <col width="50"/> 
     <col width="180" /> 
    </colgroup> 
    <tr> 
     <td>data in first column</td> 
     <td>data in second column</td> 
    </tr> 
    <tr> 
     <td>more data in first column</td> 
     <td>more data in second column</td> 
    </tr> 
</table> 

Answer 3

Я думаю, что вам лучше всего было бы использовать CSS псевдо-селекторы:

table tr td:first-child { 
    width: 50px; 
} 
table tr td:last-child { 
    width: 150px; 
} 
td { 
    background: gray; 
} 

<table> 
    <tr> 
     <td>data in first column</td> 
     <td>data in second column</td> 
    </tr> 
    <tr> 
     <td>more data in first column</td> 
     <td>more data in second column</td> 
    </tr> 
</table> 

Вот пример на JSFiddle: http://jsfiddle.net/scottm28/gGXy6/11/

В качестве альтернативы, вы можете также использовать CSS3 :nth-child() Selector