Rounded fixed table layout cell width percentage calculation for spanned elements

Question

Note: This issue appears to only happen in Blink browsers like Chrome. It does not occur in Firefox at the time of writing.

I have a table-layout: fixed table containing some elements that span over multiple columns. To ensure they fill the entirety of the columns, they use calc() to determine their width as a (colspan) multiple of 100%, plus the space taken up by their borders.

For example, an item spanning three columns would be calc(300% + 2px), i.e. three column widths plus two 1px-thick borders between them.

In Chrome, this calculation results in items not filling the columns in certain screen widths. As you resize the screen, it appears that rounding causes the items to 'jump' when they hit the right value.

Is there a reason other than rounding that this is happening, and is there anything I can do to prevent it? Presumably swapping the whole table out for equal div cells would work, but I'd much rather work with what I have.

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
td {
  position: relative;
  padding: 0;
  border: 1px solid black;
}
.spanner {
  width: calc(600% + 5px);
  background-color: rgba(254,0,11, 0.3);
}

<table>
  <tbody>
    <tr>
      <td>Some</td>
      <td>table</td>
      <td>cells</td>
      <td>are</td>
      <td>up</td>
      <td>here</td>
    </tr>
    <tr>
      <td>
        <div class="spanner">Here's some div that is meant to span the first two table cells, but it doesn't quite do that</div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

grogro grogro · Accepted Answer · 2019-11-04T13:38:03

you should use "colspan" attribute

<table>
  <tbody>
    <tr>
      <td>Some</td>
      <td>table</td>
      <td>cells</td>
      <td>are</td>
      <td>up</td>
      <td>here</td>
    </tr>
    <tr>
      <td colspan="2">
        Here's some div that is meant to span the first two table cells
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

About widths, if you use css property

box-sizing : border-box

Borders should be included in width count

Rounded fixed table layout cell width percentage calculation for spanned elements

1 Answers