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

Question

我有一个包含三个 <td> 的表细胞。

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

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

注2:为防外出第三条内容<td> ，我应该使用 table-layout: fixed;和 width: 100%;为了我的 table 。另外，我需要使用 word-wrap: break-word;对于 <td>秒。关键是我不想使用 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是一把 fiddle 。

---

我想要的是这样的:

示例 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