0

我正在尝试将应用程序的调试日志格式化为 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;？

4

1 回答 1

0

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

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

于 2013-04-30T11:49:44.433 回答