Question

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

编辑：更新代码示例：（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：fix。这是你打算做的吗？

来自w3schools的引言：

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

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

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

将表列的宽度与固定宽度表（HTML / CSS）中的文本匹配

1 个答案: