html - 防止长细胞含量拉伸(stretch)细胞

我有一张表，试图将第一列的宽度设置为20％，并将其单元格的内容用省略号包裹。我的目标是无论屏幕大小和单元格内容的长度如何，都保持20％的宽度固定。但是，当电池的含量较长时，电池的拉伸强度会超过20％。我确实尝试过table-layout: fixed，但是由于某种原因，它导致浏览器完全忽略了我的列宽指令。我正在使用Chrome，这是一个jsfiddle：

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

谢谢。

最佳答案

您需要设置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!

关于html - 防止长细胞含量拉伸(stretch)细胞，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51578802/