prevent long cell content from streching the cell

Question

I have a table where I'm trying to set the width of the first column to 20%, and wrap the content of its cells in ellipsis. My goal is to keep the 20% width fixed regardless of screen size and length of cell content. However, when the content of the cell is long, the cell streches beyond 20%. I did try table-layout: fixed, but for some reason it caused the browser to completely ignore my column width instructions. I'm working with Chrome, here's a jsfiddle:

http://jsfiddle.net/07sktof2/7/

Thanks.

Providing a jsfiddle is nice, but you should also copy/pasting your code in your post. The link will be dead one day. — aloisdg, Jul 29 '18 at 09:40
related to https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell — aloisdg, Jul 29 '18 at 09:41

score 1 · Accepted Answer · answered Jul 29 '18 at 09:38

You need to set a td max-width:

table {
    font-size: 14px;
    width: 100%;
    border: 1px solid;
    border-collapse: collapse;
}

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid black;
}


.first {
  width: 20%;
  padding-right: 20px;
}

.first .ellipsis {
  width: 90%;
  display:inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: nowrap;
}

<table>
   <thead>
     <tr>
        <th>header 1</th>
        <th>header 234567895678657</th>
     </tr>     
   </thead>
   <tbody>
     <tr>
        <td class="first">
          <span class="ellipsis">
        data long long long long long long long long long long long long cell
        </span>
        </td>
        <td class="second">data 2</td>
     </tr>
     <tr>
        <td class="first">short</td>
        <td class="second">data 2</td>
     </tr>     
   </tbody>
</table>

Try it Online!

Yeah, it seems to work, I've noticed that it even works with max-width set to zero. — Mister_L, Jul 29 '18 at 11:35

prevent long cell content from streching the cell

1 Answers1