html5 table cell width question
by rblampain from LinuxQuestions.org on (#523W4)
In a table cell row of 4 cells in HTML5, I have cell 1 and cell 4 of fixed width 25%, I am trying to have cell 2 taking no more width than necessary for its content which are a few characters and have cell 3 expand to the rest of the available space. I cannot find how to make cell 2 behave as I want.
The table renders only correctly when the content of cell 3 is large enough otherwise it seems the browser (Firefox) allocate the free space proportionally between cell 2 and cell 3 according to the content of cell 2 and cell 3.
In the example below, only row 1 and 4 render correctly. I have tried multiple solutions, too many to list.
Can anyone offer the solution?
Thank you for your help.
Code:<!DOCTYPE html><html><head>
<style>
table {
width: 100%;
}
td.mty {
width: 25%;
empty-cells: show;
border-style: solid;
}
td.number {
vertical-align: text-top;
border-style: solid;
}
td.text {
text-align: left;
line-height: 1.6;
border-style: solid;
max-width:100%;
}
</style>
</head><body>
<!-- block 1 -->
<table class="text">
<tr>
<td class="mty"></td>
<td class="number">A. </td>
<td class="text">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</td>
<td class="mty"></td>
</tr>
</table>
<!-- block 2 -->
<table class="text">
<tr>
<td class="mty"></td>
<td class="number">A.1. </td>
<td class="text">Test test test test test test
</td>
<td class="mty"></td>
</tr>
</table>
<!-- block 3 -->
<table class="text">
<tr>
<td class="mty"></td>
<td class="number">A.1.1. </td>
<td class="text">Test test test test test test test test test test test test test test test test test test test test test test test test test
</td>
<td class="mty"></td>
</tr>
</table>
<!-- block 4 -->
<table class="text">
<tr>
<td class="mty"></td>
<td class="number">A.1.2. </td>
<td class="text">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</td>
<td class="mty"></td>
</tr>
</table>
</table></body></html>
The table renders only correctly when the content of cell 3 is large enough otherwise it seems the browser (Firefox) allocate the free space proportionally between cell 2 and cell 3 according to the content of cell 2 and cell 3.
In the example below, only row 1 and 4 render correctly. I have tried multiple solutions, too many to list.
Can anyone offer the solution?
Thank you for your help.
Code:<!DOCTYPE html><html><head>
<style>
table {
width: 100%;
}
td.mty {
width: 25%;
empty-cells: show;
border-style: solid;
}
td.number {
vertical-align: text-top;
border-style: solid;
}
td.text {
text-align: left;
line-height: 1.6;
border-style: solid;
max-width:100%;
}
</style>
</head><body>
<!-- block 1 -->
<table class="text">
<tr>
<td class="mty"></td>
<td class="number">A. </td>
<td class="text">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</td>
<td class="mty"></td>
</tr>
</table>
<!-- block 2 -->
<table class="text">
<tr>
<td class="mty"></td>
<td class="number">A.1. </td>
<td class="text">Test test test test test test
</td>
<td class="mty"></td>
</tr>
</table>
<!-- block 3 -->
<table class="text">
<tr>
<td class="mty"></td>
<td class="number">A.1.1. </td>
<td class="text">Test test test test test test test test test test test test test test test test test test test test test test test test test
</td>
<td class="mty"></td>
</tr>
</table>
<!-- block 4 -->
<table class="text">
<tr>
<td class="mty"></td>
<td class="number">A.1.2. </td>
<td class="text">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</td>
<td class="mty"></td>
</tr>
</table>
</table></body></html>