Reputation: 13
I am having trouble creating a fixed-size table with no wrapping. I have tried looking in many places but cannot find a solution to this problem. I have posted codes of what I think seems to be the problem.
Here is the table layout I am trying to get:
<table style="border: 1px solid black; table-layout:fixed; border-collapse:collapse;">
<tr>
<th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0
</th>
<td width="230px" colspan="6" style="border: 1px solid black;">1
</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;">8
</td>
<td colspan="3" style="border: 1px solid black;">9
</td>
</tr>
<tr>
<td width="41" style="border: 1px solid black;">14
</td>
<td width="25" style="border: 1px solid black;">15
</td>
<td width="25" style="border: 1px solid black;">16
</td>
<td width="25" style="border: 1px solid black;">17
</td>
<td width="25" style="border: 1px solid black;">18
</td>
<td>19
</td>
</tr>
</table>
Essentially, in the above table, boxes 0, 1, 8, 9 and 14 -- 18 are fixed width, and 19 is allowed to change size according to the other fixed widths. However, with this table, the entire table resizes with the window despite having layout:fixed
. To combat that, I tried including width="460px"
:
<table style="border: 1px solid black; table-layout:fixed; border-collapse:collapse;" width="460px">
<tr>
<th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0
</th>
<td width="230px" colspan="6" style="border: 1px solid black;">1
</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;">8
</td>
<td colspan="3" style="border: 1px solid black;">9
</td>
</tr>
<tr>
<td width="41" style="border: 1px solid black;">14
</td>
<td width="25" style="border: 1px solid black;">15
</td>
<td width="25" style="border: 1px solid black;">16
</td>
<td width="25" style="border: 1px solid black;">17
</td>
<td width="25" style="border: 1px solid black;">18
</td>
<td>19
</td>
</tr>
</table>
This does indeed solve the resizing problem, but now the desired widths for boxes 14 -- 19 are ignored! This has been extremely frustrating and I have tried many many suggestions from online.
A couple of my constraints:
Upvotes: 1
Views: 770
Reputation: 89
<table style="border: 1px solid black; border-collapse:collapse;" width="460px">
<tr>
<th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0
</th>
<td width="230px" colspan="6" style="border: 1px solid black;">1
</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;">8
</td>
<td colspan="3" style="border: 1px solid black;">9
</td>
</tr>
<tr>
<td width="41px" style="border: 1px solid black;">14
</td>
<td width="25px" style="border: 1px solid black;">15
</td>
<td width="25px" style="border: 1px solid black;">16
</td>
<td width="25px" style="border: 1px solid black;">17
</td>
<td width="25px" style="border: 1px solid black;">18
</td>
<td width="auto">19
</td>
</tr>
</table>
Upvotes: 1