如何在固定布局表中创建可变宽度？

Question

我有一个包含三个<td> 单元格的表格。

• 第一个<td> 的宽度应取决于内容。
• 第二个<td> 的宽度应该永远固定。
• 第三个<td> 的宽度应填满剩余空间。

注意1：我的网站是响应式；第三个<td>的宽度应该在不同的屏幕上改变。

注意2：为了防止第三个<td>的内容流出，我的表应该使用table-layout: fixed;和width: 100%;。另外，我需要将word-wrap: break-word; 用于<td>s。关键是我不想使用word-break: break-all; 而不是word-wrap。 （因为它打破了中间的单词<td>）

---

这是我的尝试：

HTML：

<div class="container">
   <table>
      <tr>
         <td class="VN">depends on the number of digit</td>
         <td class="S">always fixed</td>
         <td class="CT">all of the rest (remaining)</td>
      </tr>
   </table>
</div>

CSS：

.container{
   width: 60%;
}

table{
   table-layout: fixed;
   width: 100%;
}

td{
   word-wrap: break-word;
   vertical-align: top;
}

.VN{
   width: auto;
}

.S{
   width: 10px;
}

.CT{
   width: 98%;
}

here 也是一个小提琴。

---

我想要的是这样的：

示例 1：

+-+---+-------------------------------------------------------+
|4|fix|this is a test...!                                     |
+-+---+-------------------------------------------------------+

例子2：

+----+---+----------------------------------------------------+
|2   |fix|this is a test...!                                  |
+----+---+----------------------------------------------------+
|    |fix|this has not any first <td>...!                     |
+----+---+----------------------------------------------------+
|1234|fix|this has not any first <td>...!                     |
+----+---+----------------------------------------------------+

例子3：

+---+---+-----------------------------------------------------+
|123|fix|the width of number of vote up cell should be        |
|   |   |changeable and it should be noted that this cell is  |
|   |   |break-word.                                          |
+---+---+-----------------------------------------------------+

例子4：

+---+---+-----------------------------------------------------+
|123|fix|It is a integrated testtttttttttttttttttttttttttttttt|
|   |   |ttttttttttttttttttttttttttttttttttttttttttttttttttttt|
|   |   |tttttttttttttttttttttttttttttttttttttttt             |
+---+---+-----------------------------------------------------+

例子5：

+---+---------------------------------------------------------+
|fix|this has not any first <td>.. then remove VN cell!       |
+---+---------------------------------------------------------+
|fix|this has not any first <td>.. then remove VN cell!       |
+---+---------------------------------------------------------+

---

我需要使用 JavaScript 来实现我需要的吗？

Answer 1

试试这个属性：

white-space: pre-line;

还有更多具有不同行为的值here