Why is width on td element not working with table-layout fixed?

Question

I have read many post on SO about this, e.g. TD column width value not working with fixed table-layout td widths, not working? etc. But still when I give width to td it doesn't get that width. Here is a working example of the problem:

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>

The first td should have taken 50px and the second should have taken 150px, but this is not happening. Why?

how about use inline css on 2nd `td` and see if it works – claudios Nov 04 '16 at 08:48 — claudios, Nov 04 '16 at 08:48
Can be also achieve using `colspan` – claudios Nov 04 '16 at 08:55 — claudios, Nov 04 '16 at 08:55

score 1 · Answer 1 · answered Nov 04 '16 at 08:52

Your pseudo :second-of-type is invalid. Try :nth-of-type() instead:

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

However this isn't a very robust way of targetting your element. What if you have multiple tables on your page. It might be a good idea to add a class to your table:

<table class="my-table">

And then target specific for that table:

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

score 1 · Answer 2 · answered Nov 04 '16 at 08:59

There is no such selector like second-of-type you can use nth-child(2) instead. and you should apply style to th while you are using thead The below solution gives you the desired result

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>

But why do we have to change widths of `th`? I just need to change width of `td`? — user31782, Nov 04 '16 at 10:02

score 0 · Answer 3 · answered Nov 04 '16 at 08:54

0

Try to fix width for th instead of td like this: Demo

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

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

answered Nov 04 '16 at 08:54

G.L.P

7,119
5
25
41

But why do we have to change widths of `th`? I just need to change width of `td`. – user31782 Nov 04 '16 at 09:17

score 0 · Answer 4 · answered Apr 04 '17 at 12:36

You are just setting the width on the td elements, the th are causing the problem. Set the width on both and it will work:

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;
}

Example: https://www.w3schools.com/code/tryit.asp?filename=FEAXCBFALXN2

Why is width on td element not working with table-layout fixed?

4 Answers4