如何創建100％寬度的表格，第一列的動態寬度以及第二列的包裝文本？

我在嘗試將應用程序的調試日誌格式化爲HTML表格。我有兩列：一個用於時間戳，另一個用於日誌條目的文本。文本可以很容易地包含長字符序列。例如：如何創建100％寬度的表格，第一列的動態寬度以及第二列的包裝文本？

<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我想：

在鉻26，而不，該表不是瀏覽器更寬，並出現一個水平滾動條。由於此設置使我的列寬相等，因此我必須將時間戳列的寬度設置爲預定義值：width: 100px;。

問題是，如果用戶改變了縮放因子Ctrl + Mouse Wheel，時間戳可以很容易變得比它們的列更寬，這看起來很醜。是否有可能使timestamp列的寬度跟隨其內容的寬度？（我可以用white-space: pre;使它不可破解。）或者，有沒有另一種方法不是基於？

來源

2013-04-30 kol

如果我在[這個小提琴] [Ctrl + Mouse Wheel]中使用Chrome 26時間戳會適合他們的列就好了嗎？ – Jeroen 2013-04-30 10:49:06

@Jeroen嘗試設置50％的縮放。 – kol 2013-04-30 10:50:59

看起來很好嗎？ [截圖]（http://i.imgur.com/floVBom.png）。 – Jeroen 2013-04-30 10:52:53

由於1em等於當前字體大小，最好設定時間戳記列的寬度在em單元代替px。這樣，列的寬度將與其內容成比例，從而解決了縮放問題。

此解決方案是次優的，因爲實際的寬度值將取決於font-family。例如對於Times New Roman，時間戳記列的寬度可以設置爲6em，但更寬的字體如Courier New需要8em。

來源

2013-04-30 11:49:44 kol

如何創建100％寬度的表格，第一列的動態寬度以及第二列的包裝文本？

回答

相關問題