html – Desk component width utilizing column widths – Safari

I’ve a desk component with its column widths set to 120px. The desk component width is mechanically calculated by aggregating all of the column widths: 3 x 120 = 360px. This seems to work advantageous throughout all browsers, nonetheless in Safari after I insert textual content to one among its cells with a width that exceeds the column width (and requires wrapping) – the entire column’s and the desk’s widths seem to broaden and ignore the 120px column width. The enlargement seems to be immediately linked to how lengthy the desk width can be if the width restrictions weren’t set.

Chrome and Firefox seem to honour the pre-set column widths and don’t broaden them when there’s a cell with wrapped textual content.

I’m not fairly positive if this can be a Safari bug, however would ideally wish to discover a option to get it to work the identical because it does within the different browsers.

To notice, a method I discovered to get round that is to manually set the desk width, nonetheless I’m not ready to make use of this resolution as my part facilitates performance that enables customers to dynamically management the column widths, therefore I want to discover a option to mechanically set the desk width identical to within the different browsers.

desk {
  border-spacing: 0px;
}

th {
  width: 120px;
  padding: 0px;
}

th, td {
  border: 1px stable gray;
  word-wrap: wherever;
}

Desk with wrapping textual content:
<desk>
  <tr>
    <th>Identify</th>
    <th>Contact</th>
    <th>Nation</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Buying and selling</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</desk>
    
<br>
Desk with no wrapping textual content:
<desk>
  <tr>
    <th>Identify</th>
    <th>Contact</th>
    <th>Nation</th>
  </tr>
  <tr>
    <td>Alfreds</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Buying and selling</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</desk>