Question

I’m new to CSS and have to modify some complicated code from someone else. What I want is very simple, three s with borders in one in one table, each has a 33% width FIXED, I don’t want the width of these s jumping around as their content width changes, and I want a horizontal scroll bar if it’s content is too wide (like too wide in one word without white space).

I tried something like this but doesn’t work, any clue? Thanks!

<table>
  <tr>
    <td style="width: 34%; max-width: 34%; overflow: auto">abc</td>
    <td style="width: 33%; max-width: 33%; overflow: auto">efg</td>
    <td style="width: 33%; max-width: 33%; overflow: auto">xyz</td>
  </tr>
</table>

Answer 1

You need to set fixed with for table.

Edit : colgroup is the correct tag

<table style="table-layout:fixed;width:1000px;overflow-x:auto;">
<colgroup>
  <col width="34%">
  <col width="33%">
  <col width="33%">
</colgroup>
  <tr>
    <td>abc</td>
    <td>efg</td>
    <td>xyz</td>
  </tr>
</table>