html - 防止长单元格内容拉伸(stretch)单元格

Question

我有一个表格，我试图将第一列的宽度设置为 20%，并将其单元格的内容用省略号括起来。我的目标是无论屏幕大小和单元格内容的长度如何，都保持 20% 的宽度不变。但是，当单元格的内容很长时，单元格会拉伸(stretch)超过 20%。我确实尝试了 table-layout: fixed，但由于某种原因，它导致浏览器完全忽略了我的列宽指令。我正在使用 Chrome，这是一个 jsfiddle:

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

谢谢。

Answer 1

您需要设置一个 td 最大宽度:

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!