html - 将表格列的宽度与固定宽度表格中的文本相匹配 (HTML/CSS)

Question

我有一个日志条目表，我想用两列显示:时间戳和日志条目本身。表格具有固定宽度。我希望时间戳列能够拉伸(stretch)以适合时间戳本身的文本并且不再继续，然后让表的其余宽度被消息占据。我希望时间戳文本始终为一行，并让日志消息环绕。我有那部分工作，但对于我的生活，我无法弄清楚如何使列宽适合时间戳的文本宽度。我可以做一个固定的像素宽度，但这似乎不太靠谱。

编辑:更新了代码示例:(http://jsfiddle.net/GH7jj/7/)

<div class="MainDiv">
<table class="LogTableStyle">
<tr>
    <th>Time</th>
    <th>Message</th>
</tr>
<tr>
    <td class="LogTime">11/07/2012 07:38:14</td>
    <td class="LogMessage">There was something that happened at this point.  This is a pretty long message though.  It should be wrapping around.  I want the timestamp to be on that one line while giving this message as much room as possible.  That'd be cool.</td>
</tr>
</table>
</div>​

还有 CSS:

.MainDiv {
    min-width:300px;
    max-width:500px;
    height:100%;
    background-color:#F0F0FF;
    margin:auto;
}
.LogTableStyle {
    width:97%;
    margin:auto;
    border-collapse:collapse;
    table-layout:fixed;
}
.LogTableStyle th {
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    background-color:#333;
    color:#FFF;
    border:solid 1px #000;
    padding:3px;
    border-left-style: none;
    border-right-style: none;
}
.LogTableStyle td {
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
}
.LogTime {
    white-space:nowrap;
}
.LogMessage {
    overflow:hidden;
    text-overflow:ellipsis;
}​

Answer 1

/* http://jsfiddle.net/oatkiller/GH7jj/9/ */

.LogTableStyle {
    width:97%;
    margin:auto;
    border-collapse:collapse;
}

我刚刚从您的 CSS 中删除了 table-layout: fixed。这是你打算做的吗？

引自 w3schools:

汽车
自动表格布局算法(这是默认的):列宽由单元格中最宽的牢不可破的内容设置可能会很慢，因为它需要在确定最终布局之前通读表格中的所有内容

固定固定表格布局算法:水平布局只取决于表格的宽度和列的宽度，而不是单元格的内容允许浏览器比自动表格布局更快地布置表格一旦接收到第一行，浏览器就可以开始显示表格

http://www.w3schools.com/cssref/pr_tab_table-layout.asp