4

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

编辑：更新代码示例：（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;
}​
4

1 回答 1

2 
/* 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

于 2012-11-14T22:28:53.647 回答