logo标签列表

CSS表格中有一列占据剩余的空间

htmlcss
25

我已经尝试了几种方法（并在这里查找），但到目前为止都没有成功。因此，我要询问。

我的愿望：

我有以下简单的HTML：

<table>
  <tr>
    <td class="small">First column with text</td>
    <td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
    <td class="small">Small column</td>
  </tr>
</table>
First Column The middle column should take the rest of the space and the text within should be ellipsised before it needs to break to a second line. Last Column

The table above should be 100% width of its parent container. The first and last column with the class "small" should be as large as they need to be, so the content can fit into it without a line break (equivalent to using "white-space: nowrap"). It is not feasible to set a fixed width for these columns as their content length may vary. The middle column with the class "extend" should take the remaining space within the table (to ensure the table stays within 100% width of its parent container) and the text within it should be truncated with an ellipsis before it breaks to a second line. Adding additional divs or spans is possible, but getting rid of the table altogether may also provide a solution. A working example can be found in this fiddle: http://jsfiddle.net/3bumk/113/.

1
给定中心 TD 样式为 100%，不确定。 - Manish Parmar
@Manish，那个不起作用。只要中间列也有 white-space: nowrap，它仍会导致表格溢出其父级边界。我还更新了 fiddle 来展示这一点。 - Tim Roes
6个回答
13
这是一个使用div而不是表格的答案：演示 HTML 
<div class="container">
    <div class="fnl first">First Baby</div>
    <div class="fnl last">Last Guy</div>
    <div class="adjust">I will adjust between both of you guys</div>
</div>

CSS（层叠样式表）
.container{
    width: 300px;
}
.first{
    float:left;
    background: red;
}
.last{
    float:right;
    background: orange;
}
.adjust{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
4
根据 OP 是否可以使用 div 替代表格，选择适当的解决方案... 我会避免使用 "完美解决方案" 等词语。 - Christoph
事实上，我可以（并且更喜欢）使用 div 而不是 table。而且这个解决方案恰好具有我所描述的行为，所以我会接受它（并希望它在我的稍微复杂一些的真实项目中也能起作用）。 - Tim Roes
需要注意的一点是，DIV元素有意按可调长度的DIV放在最后。（我强调这一点是因为实现方式与HTML标签的常规顺序相反，可能会在适应此代码片段时犯一个常见错误。） - Dor Rotman
3
我需要一个“表格”方案的其中一个原因是，所有列/字段的宽度在所有行中都保持恒定。使用“div”时这是不可能的。 - Joshua Pinter
1
不确定为什么这个答案被接受，因为问题是关于表格的！如果是关于div的问题，我并不认为这个解决方案很好，但既然当时还没有跨浏览器支持CSS网格和flexbox，我可以理解为那时候这是一个选项。 - Jeff Walters
5
像这样吗？http://jsfiddle.net/NhGsf/ 通过使用以下代码：display: table; width: 100%; table-layout: fixed; position: absolute; top: 0; 并将第一个和最后一个子元素设置为固定宽度，中间部分将占据其余的空间。
2
正如我所提到的：为最后一列和第一列设置固定宽度并不是一个解决方案，因为它们的内容长度是不固定的。 - Tim Roes
2

在Firefox和Chrome中，min-width与width:100％相结合似乎可以起作用：

  tr {
    td:first-of-type {
      width: 100%;
    }
    td:last-of-type {
      min-width: 200px;
    }
  }
2

我曾经面临同样的挑战，后来我使用表格找到了以下解决方案。

在长列中，HTML需要使用DIV。CSS定义了您的小型和扩展类。难点在于定义扩展类。

这将给您所描述的行为。

HTML

<table>
  <tr>
    <td class="small">First column with text</td>
    <td class="extend">
      <div class="small">This column should fill the remaining space but should be truncated if the text is too long.</div>
    </td>
    <td class="small">Small column</td>
  </tr>
</table>

CSS

table {
  margin-top: 50px;
}

table td {
  white-space: nowrap;
}

table td:nth-child(1) {
  background-color: red;
}

table td:nth-child(2) {
  background-color: green;
}

table td:nth-child(3) {
  background-color: orange;
}

.extend {
  display: table;
  table-layout: fixed;
  width: 100%
}

.small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
我发现只需要将.extend类应用于td即可使其工作（不需要div）。在我的情况下，扩展的td中唯一的元素是一个range输入。我还在其他列中添加了white-space: nowrap;以防止它们换行。 - Alex Hajnal
0

您可以通过将最长的列移动到末尾，然后使用嵌套表格来重新排列列。

CSS

.extend
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}
td
{
    white-space:nowrap;
}
.box
{
    width:1000px;
    border:blue solid thick;
    overflow:hidden;
}

HTML

<div class="box">
<table width="100%" border="1">
  <tr>
    <td class="small">First column with text</td>
     <td class="small">Small column</td>
     <td>
<table>
     <tr>
    <td  class="extend" >This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long.</td>
    </tr>
    </table>
   </td>
  </tr>
</table>
</div>

除了省略号之外，它运行良好。 查看结果

-1

请参见这个fiddle（或者，另一种选择），您需要为每个表格单元格设置max-width：

body{
    width:100%;
    padding:0;
    margin:0;
}
table {
    margin-top: 50px;
    width:100%;
    max-width:100%;
}
table td {
    white-space: nowrap;
}
table td:nth-child(1) {
    background-color:red;
    max-width:100px;
}
table td:nth-child(2) {
    background-color: green;
    overflow:hidden;
    max-width:100px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table td:nth-child(3) {
    background-color: orange;
    max-width:100px;
}
1
接近，但不完全符合OP的要求。第一列和最后一列应尽可能窄，以便为中间列提供最大宽度。 - Christoph
不幸的是，它的行为不像我希望的那样（也不像我描述的那样）。如果您扩展容器的宽度，则最后一列和第一列会变得比其内容更大。只有中间的列应该占用空间，第一列和最后一列永远不应该超过所需空间。@Christoph 更快 :) - Tim Roes
更改max-width属性应该可以实现这一点，但我认为无法使用表格实现完全相同的行为 :( - SW4
@Tim你必须使用表格吗？因为在这里使用div构造可能更容易实现。 - Christoph
@TimRoes 如果你需要div的解决方案，我已经发布了，看一下这个链接https://dev59.com/zGIj5IYBdhLWcg3wpWhx#20044738 - Rohit Agrawal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接