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

Question

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

[Name] [Message] Date]

如果[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似乎这个例子正是我需要的。 虽然我仍然认为table会更整洁。
编辑2 [Message]需要允许多行...
编辑3 这是基于编辑1中的链接我所需要的（完全） 的工作示例

Answer 1

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

然而，使用一点点JavaScript药物就会失效：如上所述，100％，然后通过将第一列设置为特定宽度（以像素为单位）（使用浏览器分配的值）对表进行后处理，删除width: 100%设置，并将表格布局设置为固定 - 这意味着浏览器现在有两列宽度固定宽度，总宽度设置为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的属性只是使单元格宽度更加明显。

更新：这不解决在第一列上设置最大宽度的问题。 除非您指定超出宽度时应该发生什么（截断，自动换行，随处换行，用连字换行？），否则该要求未定义。

Answer 2

试试这段代码。

.test
{
max-width:100px;
} 


<table style="text-align: center;">
<tr>
<th>NAME</th>
<th>message</th>
<th style="width: 95px">TIME</th>
</tr>
<tr>
<td class="test">NAME OTHER</td>
<td>message</td>
<td style="width: 95px">TIME</td>
</tr>
</table>

Answer 3

以下.css代码提供了附加图片的模板：

    table {
        display: table;
        width: 100%;
        table-layout: fixed;
        position: absolute;
        top: 10px;
        empty-cells: hide;
    }

    td.small:first-Child {
        vertical-align: top;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td.small:last-Child {
        vertical-align: top;
        width: 95px;
    }

    td.extend {
        vertical-align: top;
        word-wrap: break-word;
    }

    .userName a {
        color: #9DC8FC;
    }

---

<tr>
   <td class="small userName">
         <a title="Administrator" href="#">Administrator</a>
   </td>
   <td class="extend">
         is it me you're looking for?
   </td>
   <td class="small">
         10:14:01 AM
   </td>
</tr>