具有可變，固定和剩余寬度的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>