Raj Setty
Raj Setty

Reputation: 13

html td tags not respecting width in table

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

Answers (2)

pisi1001
pisi1001

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

M&#225;rcio Rossato
M&#225;rcio Rossato

Reputation: 1099

Try, style="max-width: 41px" maybe works.

Upvotes: 0

Related Questions