具有可变宽度、固定宽度和剩余宽度的 HTML 表格

Question

我需要创建一个具有以下布局的 HTML table:

[姓名] [消息] 日期]

[Name] 的宽度应为最长名称的宽度(最多为最大值)，[Date] 应为 95px 的固定宽度(并向右浮动)，而 [Message] 应该占用剩余的宽度。

我试过使用多个div's，但我得不到我需要的结果，而一个table似乎更简单。

到目前为止，以下内容不起作用:

<table style="width: 100%">
<tr>
<td style="width: 100%; max-width: 100px">NAME</td>
<td style="width: 100%">message</td>
<td style="width: 95px">TIME</td>
</tr>
<tr>
<td style="width: 100%; max-width: 100px">NAME OTHER</td>
<td style="width: 100%">message</td>
<td style="width: 95px">TIME</td>
</tr>
</table>

编辑 1 好像 this example正是我所需要的。虽然我仍然认为 table 会更整洁。
编辑 2 [Message] 需要允许多行...
编辑3 Here is a working sample根据编辑 1 中的链接，我需要的(完全)

Answer 1

由于要求，这不能单独在 CSS 中完成。第一列应该是灵活的，这很容易(只是防止换行并让列采用其自然宽度)，设置最后一列的宽度是微不足道的，但告诉浏览器使用中间列中的所有其余部分(而不是也扩展第一列)不能在 CSS 中完成。如果您将其宽度设置为 100%，则在某些浏览器中一切正常，但其他浏览器(如 IE)会有所不同。您需要宽度加上 100% 加上 95px 才能等于 100%，这当然是不可能的，浏览器以不同的方式处理这个问题。

然而，使用一点点 JavaScript 效果会变差:按照上面的说明，使用 100%，然后通过将第一列设置为以像素为单位的特定宽度(使用浏览器分配的值)来对表格进行后处理，删除 width: 100% 设置，并将表格布局设置为 fixed——这意味着浏览器现在有两列宽度固定宽度，总宽度设置为 100%，一列没有设置宽度，因此很容易将剩余的宽度分配给中间列。

<style>
td:first-child  { white-space: nowrap }
td:nth-child(2) { width: 100% }
td:nth-child(3) { width: 95px }
</style>
<table border cellspacing=0 style="width: 100%">
<tr>
<td style="">NAME</td>
<td style="">message</td>
<td style="width:95px">TIME</td>
</tr>
<tr>
<td>NAME OTHER</td>
<td>message</td>
<td>TIME</td>
</tr>
</table>
<script>
(function () {
var row = document.getElementsByTagName('tr')[0];
var cell1 = row.children[0];
cell1.style.width = cell1.clientWidth + 'px';
row.children[1].style.width = 'auto';
document.getElementsByTagName('table')[0].style.tableLayout = 'fixed';
})();
</script>

为简单起见，此代码基于页面上没有其他表格的假设。根据需要修改。属性 border cellspacing=0 只是让单元格宽度更明显。

更新:这没有解决在第一列上设置最大宽度的问题。除非您指定超过宽度时应该发生什么(截断、自动换行、在任何地方换行、用连字符换行？)，否则该要求未定义。