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

我试图找到一种简单的方法来使用css创建一个1行3列的表。我希望表的宽度为container div的宽度，高度仅为1行。第一列和第三列应展开以包含文本的宽度。中间的列应该填充所有剩余的宽度（直到容器宽度），并隐藏溢出

我的中柱有问题。当我使用空格：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>

标题在这里
当这太长而无法在一行上显示时，溢出将被隐藏
最后更新时间：下午12:05

或者有没有更简单的方法使用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>

标题在这里
当这太长而无法在一行上显示时，溢出将被隐藏
最后更新时间：下午12:05

您的中间td没有指定任何

宽度

或

高度。因此，它具有默认的
宽度：auto
和
高度：auto
。这就是为什么，它总是自我放大。如果您尝试给td一个固定的
宽度
，它将垂直缩放。
您可以通过给它一个固定的
高度
和
宽度
以及
显示：内联块来停止此操作

同样的情况也适用于div。但对于div，您不需要指定display:inline block

您需要为td（第一个样本）或div（第二个样本）提供固定的宽度和高度，以隐藏溢出，即使
溢出：隐藏工作

基于表格的布局：

在你的中间试试这个css
td
：看到了吗

基于div的布局

给你的div这个css：看到这个了吗


css
加成

左内容
正确内容
一些中心内容
是否需要使用表格？”听起来像“span对我来说：）这很好。谢谢你的例子。在旧版本的IE上也可以吗？目前我只能检查IE8和Firefox。它在IE7/8/9、Firefox和Google chrome中对我有效：）这种技术不使用复杂的css或特定于供应商的样式，因此我相信它在所有浏览器中都能正常工作（它不基于框大小css属性，因此删除它将保持布局完整）
.middle
{
    height:20px;
    width:70%;
    overflow:hidden; 
    display:inline-block; /*add this property also for the td */
}

.middle
{
    float:left;
    width:40%; 
    height:20px; 
    overflow:hidden;
}

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