Question

I’ve got a table cell that I would always like to be a particular width. However, it doesn’t work with large strings of unspaced text. Here’s a test case:

td {   border: solid green 1px;   width: 200px;   overflow: hidden; }

<table>   <tbody>     <tr>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>     </tr>   </tbody> </table>

How do I get the text to be cut off at the edge of the box, rather than having the box expand?

Answer 1

Here is the same problem.

You need to set table-layout:fixed and a suitable width on the table element, as well as overflow:hidden and white-space: nowrap on the table cells.

---

Examples

Fixed width columns

The width of the table has to be the same (or smaller) than the fixed width cell(s).

With one fixed width column:

* {   box-sizing: border-box; } table {   table-layout: fixed;   border-collapse: collapse;   width: 100%;   max-width: 100px; } td {   background: #F00;   padding: 20px;   overflow: hidden;   white-space: nowrap;   width: 100px;   border: solid 1px #000; }

<table>   <tbody>     <tr>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>     </tr>     <tr>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>     </tr>   </tbody> </table>

With multiple fixed width columns:

* {   box-sizing: border-box; } table {   table-layout: fixed;   border-collapse: collapse;   width: 100%;   max-width: 200px; } td {   background: #F00;   padding: 20px;   overflow: hidden;   white-space: nowrap;   width: 100px;   border: solid 1px #000; }

<table>   <tbody>     <tr>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>     </tr>     <tr>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>     </tr>   </tbody> </table>

Fixed and fluid width columns

A width for the table must be set, but any extra width is simply taken by the fluid cell(s).

With multiple columns, fixed width and fluid width:

* {   box-sizing: border-box; } table {   table-layout: fixed;   border-collapse: collapse;   width: 100%; } td {   background: #F00;   padding: 20px;   border: solid 1px #000; } tr td:first-child {   overflow: hidden;   white-space: nowrap;   width: 100px; }

<table>   <tbody>     <tr>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>     </tr>     <tr>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>       <td>         This_is_a_terrible_example_of_thinking_outside_the_box.       </td>     </tr>   </tbody> </table>