I'm currently working on creating a tabular layout and I'm in need of the following:
- 2 columns with variable widths
- Columns that are equal in width
- Columns that are only as wide as necessary
After some research, I discovered that by setting "table-layout: fixed" and both columns to have a "width: 50%", my desired layout can be achieved. Here's an example demonstration:
CSS:
.mytable {
border-collapse: collapse;
table-layout: fixed;
}
.fifty {
width: 50%;
}
HTML:
<table class="mytable" border=1>
<tr>
<td class="fifty">hello</td>
<td class="fifty">x</td>
</tr>
<tr>
<td class="fifty">a</td>
<td class="fifty">longer</td>
</tr>
<tr>
<td class="fifty">reallyreallylong</td>
<td class="fifty">medium</td>
</tr>
</table>
Although this perfectly fits what I require, there is one issue - when this table is nested within another table, all column widths shrink to the smallest size possible (at least on my Chrome browser).
For further clarification, you may refer to this jsFiddle link showcasing my problem: http://jsfiddle.net/KTkZm/
If anyone has any insights or solutions on how to maintain the inner table rendering the same as it does outside of the table, I would greatly appreciate it!