How to make column width suitable for its content in HTML table?
I have the following table in my 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> I want the width of the first column in the second and third rows to correspond to the length of the content (which is why I put width="1px" ). At the same time, I want the width of the table to simply match the length of the longest content in the table (this is the first row), and not cover the maximum width of its bounding div.
It works in Firefox as shown below.
However, in IE 9 it does not work as expected.
I tried replacing width="1px" with width="1%" . But then the width of the table will be equal to the maximum width of the parent div.
Does anyone know how to fix this in IE?
I just tested in my IE9 and set the width to 1px. But it is displayed, as you showed above, in compatibility mode. Have you announced your doctype and all the other fun stuff?
Perhaps this is due to the fact that you are using older methods to display the table. You can try styling a table with borders, etc. In CSS - for example:
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> etc. “I'm sure you understood this idea.” this may stop it from automatically displaying in the compatibility view (if this is a problem).
And finally, since IE9 is so stupid, you will have to disable the compatibility view (if it is included on the page), since all pages in the domain will be displayed in the compatibility view.
You mentioned that you tried to set it to 1%, did you set another to 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>