Question

我正在尝试将应用的调试日志格式化为HTML表格。我有两列：一列用于时间戳，一列用于日志条目。文本可以很容易地包含长字符序列。例如：

<table>
    <tr>
        <td class="ts">12:50:01.683</td>
        <td class="txt">[1]: NDIS-WDM_Driver_for_HighSpeed_USB-Ethernet_Adapter_(Microsoft's_Packet_Scheduler)_:\Device\NPF_{7D9F4819-8B81-49FA-B321-5F1ACBD6740D}</td> 
    </tr>
    <tr>
        <td class="ts">12:50:01.683</td>
        <td class="txt">[2]: Realtek_10/100/1000_Ethernet_NIC_________________________________(Microsoft's_Packet_Scheduler)_:\Device\NPF_{90EF96D0-AC16-41E5-AFFD-1B25D439A0D9}</td>
    </tr>
    <tr>
        <td class="ts">12:50:01.683</td>
        <td class="txt">[3]: Realtek_10/100/1000_Ethernet_NIC_________________________________(Microsoft's_Packet_Scheduler)_:\Device\NPF_{D3FA28DC-C59B-4027-AC43-6480B775ACD9}</td> 
    </tr>
</table>

我希望该表始终使用100％的浏览器宽度。时间戳列的宽度应适应其内容，第二列的文本应自动换行。我试过的CSS：

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

td { 
    border: solid 1px #000;
}

.ts {
    width: 100px;
}

.txt {
    word-wrap: break-word;
}

在Chrome 26中，如果没有table-layout: fixed;，则表格比浏览器宽，并显示水平滚动条。由于此设置使列的宽度相等，因此我必须将时间戳列的宽度设置为预定义值：width: 100px;。

问题是，如果用户将缩放系数更改为Ctrl + Mouse Wheel，则时间戳可能很容易变得比其列更宽，这看起来很难看。是否可以使时间戳列的宽度遵循其内容的宽度？（我可以使用white-space: pre;使其牢不可破。）或者，是否有另一种不基于table-layout: fixed;的方法？

Answer 1

由于1em等于当前字体大小，因此最好以em为单位而不是px来设置时间戳列的宽度。这样，列的宽度将与其内容成比例，这解决了缩放问题。

此解决方案不是最佳的，因为实际宽度值取决于font-family。例如，对于Times New Roman，时间戳列的宽度可以设置为6em，但更宽的字体Courier New需要8em。

如何创建一个宽度为100％的表，第一列的动态宽度和第二列的包装文本？

1 个答案: