0

アプリのデバッグ ログを HTML テーブルとしてフォーマットしようとしています。2 つの列があります。1 つはタイム スタンプ用で、もう 1 つはログ エントリのテキスト用です。テキストには、長い文字シーケンスを簡単に含めることができます。例：

<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% のブラウザー幅を使用するようにします。タイム スタンプ列の幅はその内容に合わせて調整し、2 番目の列のテキストは自動的に折り返す必要があります。私が試した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 New必要8emです。

于 2013-04-30T11:49:44.433 に答える