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

Question

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

\n\n

编辑：用代码示例更新：（http://jsfiddle.net/GH7jj/7/）

\n\n

<div class="MainDiv">\n<table class="LogTableStyle">\n<tr>\n    <th>Time</th>\n    <th>Message</th>\n</tr>\n<tr>\n    <td class="LogTime">11/07/2012 07:38:14</td>\n    <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>\n</tr>\n</table>\n</div>\xe2\x80\x8b\n

\n\n

还有CSS：

\n\n

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

\n

Answer 1

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

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

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

引用 w3schools 的内容：

auto
自动表格布局算法（这是默认值）：列宽由单元格中最宽的不可破坏的内容设置可能很慢，因为在确定最终布局之前需要读取表格中的所有内容

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

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