Within my HTML code, I've included the table displayed below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
table, td, tr, th{
border:1px;
}
.onepx{
width:1px;
}
</style>
<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 am aiming to adjust the width of the first column in rows two and three to perfectly match the length of their respective content (hence why I allocated a width of "1px"). At the same time, I want the overall table width to be determined by the longest content within it (the text in the first row), rather than expanding to the maximum width of its containing division.
This setup functions as intended in Firefox and IE9 without compatibility mode enabled, as illustrated below.
However, when IE 9 compatibility mode is activated, the layout does not operate as desired, resulting in the following display.
Unfortunately, for various reasons, I am unable to disable compatibility mode in IE9. Is there a way to apply the necessary styles to the table when compatibility mode is active?
Thank you in advance for any assistance provided.
PS. I previously asked a similar question without emphasizing the issue of IE9 compatibility mode. The present question has arisen based on insights gained from the earlier inquiry. If merging these questions is recommended due to the new requirements, please advise accordingly.