Как создать таблицу со 100% шириной, с динамической шириной для 1-го столбца и завернутый текст во 2-й столбец?

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, без , таблица шире, чем браузер, и появляется горизонтальная полоса прокрутки. Поскольку этот параметр делает ширину моих столбцов равными, мне пришлось установить ширину столбца штампа времени на предопределенное значение: width: 100px;.

Проблема заключается в том, что пользователь меняет коэффициент масштабирования на Ctrl + Mouse Wheel, временные метки могут легко расширяться, чем их столбцы, что выглядит уродливым. Возможно ли, чтобы ширина столбца временной метки соответствовала ширине его содержимого? (Я мог бы сделать его нерушимым с white-space: pre;.) Или, есть ли другой подход, который не основан на ?

Answer 1

С 1em равен текущему размеру шрифта, лучше установить ширину столбца штампа времени в em единицах вместо px. Таким образом, ширина столбца будет пропорциональна его содержимому, что решает проблему масштабирования.

Это решение является неоптимальным, поскольку фактическое значение ширины будет зависеть от font-family. Например, для Times New Roman ширина столбца временной метки может быть установлена ​​равной 6em, но для более широкого шрифта, такого как Courier New, требуется 8em.