Почему ширина на td-элементе не работает с табличным макетом?

Question

Я прочитал много сообщений о SO об этом, например. TD column width value not working with fixed table-layouttd widths, not working? и т. Д. Но все же, когда я даю ширину td, она не получает эту ширину. Вот рабочий пример задачи:

div { 
 
    width: 400px; 
 
    padding: 5px; 
 
    border: 1px solid red; 
 
} 
 
table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    border: 1px dotted green; 
 
} 
 
td { 
 
    word-break: break-all; 
 
} 
 
td:nth-of-type(1) { 
 
    width: 50px; 
 
} 
 
td:nth-of-type(2) { 
 
    width: 150px; 
 
}

<div style="width: 400px;"> 
 
    <table style="table-layout: fixed; width: 100%;"> 
 
    <thead> 
 
     <tr> 
 
     <th></th> 
 
     <th></th> 
 
     <th></th> 
 
     <th></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="odd"> 
 
     <td class=""> 
 
      <a href="#">The_first_line</a> 
 
     </td> 
 
     <td class=""> 
 
      <a href="#">The_second_but_a_long_line_with_so_many_characters</a> 
 
     </td> 
 
     <td class=""> 
 
      <ul class=""> 
 
      <li class=""><a href="#" rel="tag" title="" class="">The simple</a> 
 
      </li> 
 
      </ul> 
 
     </td> 
 
     <td> 
 
      <a href="#">last</a> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Первый td должен был 50px и второй должен был 150px, но этого не происходит. Зачем?

Answer 1

Ваше псевдо: второе место недействительно. Попробуйте: nth-of-type() вместо этого:

td:nth-of-type(2) { 
    width: 150px; 
} 

Однако это не очень надежный способ нацеливания вашего элемента. Что делать, если на вашей странице несколько таблиц. Это может быть хорошей идеей, чтобы добавить класс к столу:

<table class="my-table"> 

И тогда цель специфичными для этой таблицы:

.my-table td:nth-of-type(2) { .. } 

Answer 2

Try зафиксировать ширину для й вместо тд, как это: Demo

tr th:first-child { 
    width: 50px; 
} 

tr th:nth-child(2) { 
    width: 150px; 
} 

Answer 3

Там нет такого селектора, как second-of-type вы можете использовать nth-child(2) вместо этого. и вы должны применить стиль th при использовании thead Ниже решение дает желаемый результат

div { 
 
    width: 400px; 
 
    padding: 5px; 
 
    border: 1px solid red; 
 
} 
 
table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    border: 1px dotted green; 
 
} 
 
td { 
 
    word-break: break-all; 
 
} 
 
th:first-of-type { 
 
    width: 50px; 
 
} 
 
th:nth-child(2) { 
 
    width: 150px; 
 
}

<div style="width: 400px;"> 
 
    <table style="table-layout: fixed; width: 100%;"> 
 
    <thead> 
 
     <tr> 
 
     <th></th> 
 
     <th></th> 
 
     <th></th> 
 
     <th></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="odd"> 
 
     <td class=""> 
 
      <a href="#">The_first_line</a> 
 
     </td> 
 
     <td class=""> 
 
      <a href="#">The_second_but_a_long_line_with_so_many_characters</a> 
 
     </td> 
 
     <td class=""> 
 
      <ul class=""> 
 
      <li class=""><a href="#" rel="tag" title="" class="">The simple</a> 
 
      </li> 
 
      </ul> 
 
     </td> 
 
     <td> 
 
      <a href="#">last</a> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 4

Вы просто установив ширину на элементы TD, -м вызывают проблемы , Установите ширину на обоих, и он будет работать:

td:nth-of-type(1) { 
    width: 50px; 
} 
th:nth-of-type(1) { 
    width: 50px; 
} 
tdnth-of-type(2) { 
    width: 150px; 
} 
th:nth-of-type(2) { 
    width: 150px; 
} 

Пример: https://www.w3schools.com/code/tryit.asp?filename=FEAXCBFALXN2