我有一张表,试图将第一列的宽度设置为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/

10-09 20:03