Jak dopasować szerokość kolumny do jej zawartości w tabeli HTML?

Question

Mam poniższej tabeli w moim HTML:

<div style="max-width:700px;"> 
    <table border="1"> 
     <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr> 
     <tr><td width="1px">a:</td><td >b</td></tr> 
     <tr><td width="1px">c:</td><td >d</td></tr> 
    </table> 
<div> 

Chcę pierwszej szerokości kolumny w drugim i trzecim rzędzie po prostu dopasować długość treści (dlatego kładę width="1px" tam). W międzyczasie chcę ustawić szerokość tabeli tak, aby pasowała do długości najdłuższej treści w tabeli (która jest pierwszym rzędem) zamiast do maksymalnej szerokości ograniczającego div.

Działa w przeglądarce Firefox, jak pokazano poniżej.

Jednak w IE 9 to nie działa zgodnie z oczekiwaniami, jak pokazano na rysunku.

Próbowałem zastąpić width="1px" z width="1%". Ale wtedy szerokość stołu będzie rozciągać się do maksymalnej szerokości elementu div.

Czy ktoś wie, jak to naprawić w IE?

Answer 1

Właśnie przetestowałem w moim IE9 i ustawienie szerokości na 1px działa. Ale wyświetla się, jak przedstawiono powyżej w trybie zgodności. Czy zadeklarowałeś swój doctype i wszystkie inne fajne rzeczy?

Możliwe, że do wyświetlania tabeli używasz starszych metod. Można spróbować stylizacji tabelę z granic i tak dalej w CSS - takich jak:

table, td, tr, th{ 
    border:1px solid #f0f; 
} 

.onepx{ 
    width:1px; 
} 



<div style="max-width:700px;"> 
    <table> 
    <tr><td colspan="2">this is a loooooooooooooooong text</td></tr> 
    <tr><td class="onepx">a:</td><td>b</td></tr> 
    <tr><td class="onepx">c:</td><td>d</td></tr> 
    </table> 
<div> 

i tak dalej - Jestem pewien, że masz pomysł. może to uniemożliwić automatyczne wyświetlanie w widoku zgodności (jeśli jest to problem).

I wreszcie, ponieważ IE9 jest tak głupi, będziesz musiał wyłączyć widok zgodności (jeśli jest włączony na stronie), ponieważ wszystkie strony w domenie będą wyświetlane w widoku zgodności.

Answer 2

Wspomniałeś, że próbowałeś ustawić go na 1%, czy nastawiłeś drugi na 99%?

<tr><td width="1%">a:</td><td width="99%">b</td></tr> 
<tr><td width="1%">c:</td><td width="99%">d</td></tr>