css - 将省略号添加到表列内的 div

Question

在我的代码中，我尝试将 file-wrapper div 的内容省略，以便表格的宽度拉伸(stretch) 100% 至屏幕宽度。

我根本不知道哪里出错了，因为 file-wrapper div 有指定的像素宽度。

编辑:我现在已经将代码简化为基础。

table {
 width: 100%; 
}

.file-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

<table>
  <tr>
    <td>
      <div class="file-wrapper">
        testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing
      </div>
    </td>
  </tr>
</table>

Answer 1

我不是很确定，但我怀疑这与表格的 100% 宽度和 border 属性之间的冲突有关

<table border="1">

使用宽度 98vw 而不是 100% 查看此修改:

table {
width: 98vw; 
}

.file-wrapper {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(98vw - 214px);
}

.spacer {
width: 10px;
}

.icon {
width: 34px;
}

<table border="1">
    <thead>
        <tr>
            <td class="icon"></td>
            <td class="spacer"></td>
            <td class="file">Description</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="icon"></td>
            <td class="spacer"></td>
            <td class="file">
                <div class="file-wrapper">
                    testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing
                </div>
            </td>
        </tr>
    </tbody>
</table>