html - 如何使用 html/css 使表格只有一行高？

Question

我正在尝试找到一种使用 css 创建 1 行 3 列表格的简单方法。我希望表格宽度为容器 div 的宽度，高度仅为 1 行。第一列和第三列应展开以包含文本的宽度。中间列应填充任何剩余宽度(直至容器宽度)，并 overflow hidden 。

我在处理中间栏时遇到了问题。当我使用 white-space:nowrap 和 overflow:hidden 时，它会将表格扩展到超出容器 div 的宽度。

<div style="width:500px;">
<table style="width:100%;">
    <tr>
        <td style="white-space:nowrap;">
            Title is Here
        </td>
        <td style="">
            When this is too long to display on one line the overflow is hidden
        </td>
        <td style="white-space:nowrap;">
            Last updated 12:05pm
        </td>
    </tr>
</table>
</div>

或者是否有更简单的方法使用 div？但我看不出如何让中心 div 只填充可用空间而不是移动到下一行。

<div style="width:500px;">
    <div style="float:left;">
        Title is Here
    </div>
    <div style="float:left;">
        When this is too long to display on one line the overflow is hidden
    </div>
    <div style="float:right;">
        Last updated 12:05pm
    </div>
</div>

Answer 1

you could do it with div based layout too

CSS

     .table{width: 100%; }
     .table, .table .item{ height: 20px; overflow: hidden;}
     .table .item{float: left; box-sizing: border-box; -moz-box-sizing: border-box; background: #fcc; text-align: center;}
     .table .item.right{float: right;}
     .table .center{float: none; background: #ccf; }

标记

  <div class="table">
     <div class="item left">left content</div>
     <div class="item right">right content</div>
     <div class="center item">some center content</div>
  </div>