Chromium calculates table width incorrectly?

Question

So I have a wide table which is displayed a bit wrong in last versions of Chromium. Version 37 renders it correctly, 44 does not.

The problem is that the last column is not included in the table/thead/tbody width. So the caption is narrower than it should be. If I set table-layout:fixed this bug disappears, but I have to use auto.

Looks like a chromium bug, but anyways, is there a workaround for this?

JsFiddle of the below:

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
}

<table>
  <caption style="background: lightgreen;">
    Caption
  </caption>
  <thead>
    <tr>
      <th>
        Title
      </th>
      <th>
        Description
      </th>
      <th>
        Lorem Ipsum
      </th>
      <th>
        Lorem Ipsum
      </th>
      <th>
        Actions
      </th>
      <th>
        Actions
      </th>
      <th>
        Actions
      </th>
      <th>
        Actions
      </th>
      <th>

      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet
      </td>
      <td>
        <span>Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit. Vestibulum dignissim mauris vel auctor
                        dapibus. Morbi scelerisque interdum magna, sed pulvinar
                        libero fringilla quis. Vivamus maximus lorem tempor
                        nibh eleifend, ac euismod velit dictum.</span>
      </td>
      <td>qwe</td>
      <td>qwe</td>
      <td>qwe</td>
      <td>qwe</td>
      <td>qwe</td>
      <td>qwe</td>
    </tr>
  </tbody>
</table>
</body>

</html>

Answer 1

As far as I can see, this is a fascinating Chrome bug.

Here is a workaround using <col> to give the description column a width: 100% (substitute the width size as desired) This stops the bug and doesn't break any column widths:

table {
  border-collapse: collapse;
  border: solid 10px #F00
}
th,
td {
  border: 1px solid black;
  padding: 5px;
}
.description {
  width: 100%
}

<table>
  <caption style="background: lightgreen;">Caption</caption>
  <col>
  <col class="description">
        <thead>
          <tr>
            <th>1Title</th>
            <th>2Description</th>
            <th>3Lorem Ipsum</th>
            <th>4 Lorem Ipsum</th>
            <th>5 Actions</th>
            <th>6 Actions</th>
            <th>7 Actions</th>
            <th>8 Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1 Lorem ipsum dolor sit amet</td>
            <td>2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim mauris vel auctor dapibus. Morbi scelerisque interdum magna, sed pulvinar libero fringilla quis. Vivamus maximus lorem tempor nibh eleifend, ac euismod velit dictum.

            </td>
            <td>3qwe</td>
            <td>4qwe</td>
            <td>5qwe</td>
            <td>6qwe</td>
            <td>7qwe</td>
            <td>8qwe</td>
          </tr>
        </tbody>
</table>

Answer 2

I think that's a problem of number of and because there are one more in first row than in second row. The TH is empty and the TD doesn't exists. Please, test this:

https://jsfiddle.net/Lk8coxL6/2/

I've add an space in empty th and I add the missing td.

<th> &nbsp; </th>

And

<td> qwe </td>

Good luck