Search code examples
htmlcssinternet-explorer

CSS table > td - force content to one line cross-browser

This is working on Chrome/Edge:

<style>
  .o {
    width: 1px;
    white-space: nowrap;
  }
</style>

<table style="width:100%; position: relative; border-collapse: collapse">
  <tr>
    <td class="o">text no wrap</td>
    <th>Head</th>
    <td class="o">text no wrap</td>
  </tr>
</table>

white-space: nowrap; ... stops wraping

width: 1px; ... auto expend content to minimum needed width

This are the problems:

  • internet explorer: auto-expand width not working. (customers still use them, although i don't like ie)

So there is a wrap if width is set. Without width tds are to big (empty space) because of the missing minimize to content.

  • cross-browser: if content is too big, without wrapping, it expands table-witdh over 100%. Better would be a "only wrap if really needed".

side information: i cannot use a fixed layout, because content is filled from a database

Solution

  • You need to respect HTML structure in IE. And not just set randomly your style and table.

    And it seems to work fine the same way in all browser for me. ie is indicating : width: 79.98px when you inspect and check the calculated value. So auto expand works on ie 11

    You might have more css or html but just as you gave. IE11 is making the job as per capture:

    enter image description here