Using CSS to create table cells of a specific width with no word wrapping

Question

In a project have been involved in I needed to render tables with columns of a specific width with only one HTML line per table row (no wrapping). I need each table cell to have a padding of 1 pixel at the top and bottom and 2 pixels at the left and right. The best way I can come up with that works cross browser is to put a div inside a td inside the table in this way:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

I would love to be able to eliminate the need to add the extra div. I've spend many hours googling this issue but can't find an alternative.

Is there a way to do what I need without the need to add the extra div? If So, what is it?

Is there a way of getting the desired result without using tables at all?

Dagney

You should add the "grid" class to the table in your example HTML to make it match your example CSS – Trapani

Why do you need the div? td is a block element after all. – Trafficator

Gareth, thanks, added grid to table class. cletus, I've tried overflow: hidden; white-space: nowrap; to td and it doesn't work. – Dagney

Answer 1

Unfortunately table elements do not respect overflow, so you will need to apply that to a child element.

edit: I may have spoken too soon, as I can create this effect in FF using max-width and I've discovered this thing which might work for IE. You learn something every day.

edit2: yeah it does work for IE7 at least but there's a serious caveat that you can't have whitespace in the text, they have to be converted to  . I think you should probably stick with the <div> solution for sake of cleanliness and compatability.

Tericaterina

wow, thanks for the link and comments. I will stick with what I've got, but am more educated due to your answer. Thanks. – Dagney

link doesn't work anymore, which is why it's customary to post the relevant content here. – Romelda

Answer 2

Actually, you can.

Normally, the table takes up the space it needs. If you give the table a 100% width, it will take 100% of the with and share that between the cells regarding their contents.

There is no free space in a table: at some point, there must be a cell that takes up the remaining space once the size of the others have been set.

To set a width of a cell, you would need to give it a width and a max-width to the same size. For a table with N columns, you can do that to N-1 columns, and the last column will take the remaining space.

If you do that to N-2 columns, the two columns that do not have fixed with will share the remaining space.

Having this all, you can add white-space:no-wrap and/or text-overflow:ellipsis if you wish.

Here is an image example (my RSS reader) : https://i.stack.imgur.com/bPpKP.png

And a live example: https://codepen.io/lehollandaisvolant/pen/REVNLy?editors=1100

You can see that it’s actually amazingly powerfull. In the codepen, you can see:

• some cells are fixed width
• some cells fit to the text it contains
• some cells fit the the container

And you can decide the behaviour of each cell (as long as there is one cell that fits to the container)

Vixen

Given that the specs. does not define it for table cells, it is not recommended to use max-width: #8465885 ... whether one can or not. – Suneya

Answer 3

You should not need to nest a div within each table cell. The following should achieve the same affect.

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Shirty

Thanks for the quick response. I've tried using overflow: hidden; white-space: nowrap; in td but it doesn't seem to work cross browser. – Dagney

why would addign naked spans do anything? let alone improve on adding divs? – Tericaterina

Answer 4

You can also simply replace table by div.

Then you have to define the column width in CSS (which may be tricky to get to work across all browsers).

Example: Your code would then look like this:

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>

Eiffel