Table with white-space: nowrap and one column needs overflow: hidden

Question

Here is my layout:

body {
  font: 12px sans-serif;
}
#div1 {
  width: 750px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: lime;
}
#table1 {
  background-color: white;
}
#table1 th, #table1 td {
  white-space: nowrap;
}
.class1 {
  background-color: pink;
}
/* all background colors are for testing */

<div id="div1">
  <table id="table1">
    <tr>
      <th>Name</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Fr<br/>10</th>
      <th>Sa<br/>11</th>
      <th>Su<br/>12</th>
      <th>Mo<br/>13</th>
      <th>Tu<br/>14</th>
      <th>We<br/>15</th>
      <th>Th<br/>16</th>
      <th>Fr<br/>17</th>
      <th>Sa<br/>18</th>
      <th>Su<br/>19</th>
      <th>Mo<br/>20</th>
      <th>Tu<br/>21</th>
      <th>We<br/>22</th>
      <th>Th<br/>23</th>
    </tr>
    <tr>
      <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Curabitur bibendum tellus id turpis fermentum eu fermentum sapien ornare.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Donec eu neque tortor, ornare viverra sapien.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Praesent ac leo justo, et tempus turpis.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vestibulum hendrerit metus et mauris volutpat hendrerit.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Quisque consequat ante sit amet nibh ornare quis gravida sapien consectetur.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Maecenas at turpis ut libero volutpat mattis eget a mi.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Fusce id dui in justo porta gravida eu ac leo.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vivamus in metus at purus congue lacinia.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Aliquam suscipit mauris vulputate odio adipiscing vitae semper odio varius.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vestibulum accumsan nunc at magna facilisis gravida.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Pellentesque tempus nisi mauris, quis porttitor purus.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Fusce tincidunt elit condimentum tellus aliquet in ultrices augue aliquam.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vestibulum faucibus mauris sit amet enim bibendum fringilla.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Nam in purus non sapien cursus mollis.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Proin pulvinar ligula quis nulla varius tincidunt.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Integer faucibus hendrerit velit, nec tempor velit auctor id.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Nunc iaculis ligula pulvinar elit suscipit in volutpat augue dictum.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Pellentesque id augue sit amet nibh luctus eleifend ut non urna.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Suspendisse et neque arcu, ac fermentum ligula.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Mauris sed mauris vitae nisi suscipit bibendum sit amet vitae quam.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Morbi sagittis lorem laoreet velit consectetur ac sodales enim pretium.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Proin mattis urna in velit viverra in vulputate sapien laoreet.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Sed condimentum urna in orci interdum eu consequat felis scelerisque.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Quisque non nunc et purus mattis dictum.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Duis dictum nibh sed leo hendrerit eget dapibus lacus hendrerit.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Nam vel leo justo, sed rhoncus sem.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Ut sed augue sit amet elit scelerisque suscipit.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Proin vulputate dui et sapien tristique quis placerat nunc accumsan.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

I want the table to fit inside the fixed width div. All cells have nowrap so I want one of the columns (marked with .class1) to shrink so that the table is as wide as the outer div. I tried setting overflow: hidden but it did not work. How can I achieve the desired result without hard-coding any pixel widths?

The desired result is to keep everything on single line (hence the nowrap) but chop off one column (the first one) as much as necessary to make the table fit within a fixed width.

Answer 1

Overflow hidden will only behave as you expect if the element has a width or max-width set. Assuming the columns have overflow:hidden set, the following behaviours will become apparent.

Width Setting the width will force a column to the set value or the width of the content, whichever is greater.

Max-Width Setting the max-width will force a column to the set value or the size of the content, whichever is smaller.

For this reason you will probably want to set both the width and max width to the same value, as shown here: http://jsfiddle.net/vjfjd/7/. In my example I have only set the width of the first column, but ideally you want to add a class to all columns and explicitly set the widths of each column.

Obviously you want the table to fit the size of the container, which leaves you three options:

1. Set the column widths manually, and change them if you decide to change the width of the container.
2. Use something like Less to set the container width as a variable and set the column widths based on that (with column 1 being the leftover space after the other columns are subtracted from the container width). This gives you only one place to change the width.
3. Use percentage widths for each column.

Option 3 is probably the best option.

One thing to note is that normally you can set the width of a header in order to force the same width on cells in the same column. This is not true if you want to trigger overflow hidden, as the width has to be set on the same element that is being hidden.

Answer 2

Working fiddle: http://jsfiddle.net/vjfjd/8/

There's no need to add "class1" and other classes to your rows each time.
Pseudo-classes first-of-type, nth-of-type(n) will take care of them automatically.

Note: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; will make sure the "name" column stays on one line and gets ... at the end of the text if it doesn't fit in one line of the specified width.

body {
    font: 12px sans-serif;
}
#div1 {
    width: 750px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: lime;
}
#table1 {
    background-color: white;
    table-layout:fixed;
    width: 750px;
}
#table1 th, #table1 td {
    white-space: nowrap;
    width:20px;
    background-color: DarkSalmon;
}
tr th:first-of-type, tr td:first-of-type { /* use of pseudo classes */
    width:272px !important;
    background-color: pink !important;
    text-overflow: ellipsis;
    overflow: hidden;
}
tr th:nth-of-type(2), tr td:nth-of-type(2), /* use of pseudo classes */
tr th:nth-of-type(3), tr td:nth-of-type(3) {
    width:65px !important;
    background-color: yellow !important;
}
/* all background colors are for testing */

Answer 3

I couldn't see the .class1 selector being used in your jsfiddle code either. Anyway I updated your JS with what I thought you may be after.

http://jsfiddle.net/vjfjd/5/

I added .class1 to the name column and changed the CSS.