Question

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

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

注1：我的网站响应;应在不同的屏幕中更改第三个<td>的宽度。

注2：为防止出现第三个<td>的内容，我应该使用table-layout: fixed;和width: 100%;作为我的表格。另外，我需要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也是一个小提琴。

我想要的是这些：

例1：

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

example2：

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

example3：

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

example4：

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

example5：

+---+---------------------------------------------------------+
|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

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

1 个答案: