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

Question

我需要创建一个HTML table，其布局如下：

[Name] [Message] [Date]

其中[Name]的宽度应该是最长名称的宽度（最大为限），[Date]应该是固定的95像素宽度（并向右浮动），而[Message]应该占用剩余的宽度。

我尝试使用多个div，但无法得到所需的结果，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 [消息]需要允许多行...
编辑 3 这是一个工作样本，与编辑1中的链接完全相同，这就是我所需要的。

- TheGeekZn

---

我认为在HTML中做这个很难，可以使用JavaScript或PHP。对于PHP，我可以给你一个例子。 - LFS96

@FabianHarmsen：在PHP中的样式处理...请给我指点一下吧!!! :\ - NoobEditor

@DamienJoe：OP在他的问题中引用了那个帖子.... :) - NoobEditor

@FabianHarmsen：还是不明白...!! - NoobEditor

@NoobEditor 当然可以 :) - TheGeekZn

Answer 1

由于要求的需要，这个问题无法仅通过CSS解决。第一列应该是灵活的，这很容易实现（只需阻止换行并让列采用其自然宽度），而设置最后一列的宽度也很简单，但是告诉浏览器在中间列中使用所有剩余空间（而不是扩展第一列）不能仅靠CSS实现。如果将其宽度设置为100％，某些浏览器会按照预期方式工作，但其他浏览器（如IE）则会以不同的方式处理它。您需要将其宽度设置为某个值加上100％再加上95像素才能等于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只是为了使单元格宽度更加明显。

更新：这并没有解决在第一列设置最大宽度的问题。除非您指定如果超出宽度应该发生什么（截断、换行、任意位置换行、带连字符换行？）

- Jukka K. Korpela

---

我真的很喜欢这个答案。虽然我想尽量减少代码的负担，所以不想使用 JQuery。但如果观众们投票认为这个答案更好，我会将其标记为正确的 :) - TheGeekZn

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>

- Puneet Purohit

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>

- TheGeekZn

---

对我来说，没问题。如果你想让你的表格看起来像那样，那就是的 :) - TheGeekZn

这将在第一列设置固定宽度，而不是最长名称的宽度，并截断其内容。看看如果您添加行<tr><td>Supercalifragilistic<td>foo<td>bar会发生什么。 - Jukka K. Korpela

@JukkaK.Korpela 你说得对！在我的原始帖子中，我说最大宽度是由开发人员决定的。因此，这里有一个最大宽度，以防名称太长，例如“SuperLongBecauseSomeHaxxorWantsToMakeHeadaches” :D - TheGeekZn