Question

I have a table with a few columns in it and my second column has a lot of text which pushes the other columns too far to the right. I want my table to stay put and if there is too much text in a column for it to get cut off. I should also probably mention that I am trying to avoid using table-layout:fixed and position:absolute. Here is my code:

HTML:

<table id="messages_list" class="listing rows clickable">
  <tbody>
    <tr>
      <th class="select"><input id="all" type="checkbox"></th>
      <th class="from">To</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
    <tr class="item even " data-thread-id="16">
      <td class="first"><input class="checkbox" type="checkbox" name="id:16"></td>
      <td>LastName, FirstName, LastName2, FirstName2, LastName3, FirstName3, LastName4, FirstName4</td>
      <td>Hello</td>
      <td class="last">07/16/2012 12:26</td>
    </tr>
  </tbody>
</table>

CSS:

table.listing {
  border: 0;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 1em;
  overflow: hidden;
  white-space: nowrap;
}
table.listing th {
  padding: 4px 8px;
  font-size: 12px;
  background: #002A80;
  text-decoration: none !important;
  color: white !important;
  font-weight: bold;
  text-align: left;
}
th.select { 
  width: 10px; 
}
th.from { /* This is the column giving me problems */
  width: 20%;
  overflow: hidden;
}
th.date {
  width: 1%;
}

Live example: Tinkerbin.

Answer 1

You are not actually applying overflow to the right cell. The th.from is only the header cell and although this is sufficient to set a width that overflow property will not go onto the other cells in that column.

You’ll need to either set overflow: hidden on all td, use a second item type pseudo selector or easiest just put the from class on the td as well and style td.from and th.from the same.

It seems that you’ll also need to set table-layout: fixed; on your table or something similar. Tables like to resize to fit their content and it seems that your whole table is resizing to fit in the content that you have explicitly told it not to wrap. I can’t tell you why it prefers to expand the table rather than hide the overflow but that’s tables for you.

The table-layout property will tell it to render sizes based just on the dimensions you have given it and not try to work out how big to make things based on the content. This will mean that things like your 1% width on the date column is likely to truncate that column (except on the very very widest of screens).

I’m not sure there is an easy way to turn off wrapping while doing the overflow and keeping nice resizing. I think fixed layout tables may be your only option.