By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

table cell size

P: n/a
Ivo
Consider a table with a number of rows, each containing a short text (label)
on the left and an input control on the right. Some inputs are of type text
and others of type checkbox. I would like the cells with the checkboxes to
be as narrow as possible (square) but in this table the "width=10" bit seems
to get ignored:

<table border="1">
<tr>
<td>some text</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td colspan="2">more text</td>
<td width="10"><input type="checkbox"></td>
</tr>
</table>

What am I doing wrong?
The reason I am using a table is of course to line up the input elements.
More elegant solutions are also welcomed.
Thanks,
Ivo
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Els
Ivo wrote:
Consider a table with a number of rows, each containing a
short text (label) on the left and an input control on the
right. Some inputs are of type text and others of type
checkbox. I would like the cells with the checkboxes to be
as narrow as possible (square) but in this table the
"width=10" bit seems to get ignored:

<table border="1">
<tr>
<td>some text</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td colspan="2">more text</td>
<td width="10"><input type="checkbox"></td>
</tr>
</table>

What am I doing wrong?


Nothing, really, (I think!), but you didn't define the "middle
cell".
If you put this:
<tr><td></td><td></td><td></td></tr>
right above the first <tr>, it does work in Firefox.
Colspan is a bit tricky, and different browsers act
differently with it.
I've learned to set all widths in the first line which has
only td's without colspan, then use colspan as you see fit on
the cells in the rows below.
You can make that first row invisible if you'd use CSS.
Like this:
In the <head>
<style type="text/css">
table, td {border:1px solid black}
tr.invisible td{border:0px;}
</style>
In the <body>
<table style="width:300px;">
<tr class="invisible"><td style="width:100px;"></td><td
style="width:190px;"></td><td style="width:10px"></td></tr>
<tr>
<td>some text</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td colspan="2">more text</td>
<td><input type="checkbox"></td>
</tr>
</table>

hth

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Meredith Brooks - I'm A Bitch
Jul 20 '05 #2

P: n/a
Ivo
"Els" wrote
Ivo wrote:
Consider a table with a number of rows, each containing a
short text (label) on the left and an input control on the
right. Some inputs are of type text and others of type
checkbox. I would like the cells with the checkboxes to be
as narrow as possible (square) but in this table the
"width=10" bit seems to get ignored:

<table border="1">
<tr>
<td>some text</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td colspan="2">more text</td>
<td width="10"><input type="checkbox"></td>
</tr>
</table>

What am I doing wrong?
Nothing, really, (I think!), but you didn't define the "middle
cell".
If you put this:
<tr><td></td><td></td><td></td></tr>
right above the first <tr>, it does work in Firefox.
Colspan is a bit tricky, and different browsers act
differently with it.


Is that so? Never noticed. I 'd think that ancient table stuff would be
pretty much standardized by now.
I've learned to set all widths in the first line which has
only td's without colspan, then use colspan as you see fit on
the cells in the rows below.
You can make that first row invisible if you'd use CSS.
Like this:
In the <head>
<style type="text/css">
table, td {border:1px solid black}
tr.invisible td{border:0px;}
</style>
In the <body>
<table style="width:300px;">
<tr class="invisible"><td style="width:100px;"></td><td
style="width:190px;"></td><td style="width:10px"></td></tr>
<tr>
<td>some text</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td colspan="2">more text</td>
<td><input type="checkbox"></td>
</tr>
</table>


Thank you for your ideas, but the checkbox cell is still wider than it needs
to be, and I 'd rather not rely on fixed pixels as I can't know the lengths
of the texts beforehand.
In other experiments, I am having more success with this approach:
<tr>
<td>some text</td>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="2">
<span style="float:right;">
<input type="checkbox">
</span>
more text
</td>
</tr>

Thanks again,
Ivo
Jul 20 '05 #3

P: n/a
Ivo wrote:

Thank you for your ideas, but the checkbox cell is still wider than it needs
to be, and I 'd rather not rely on fixed pixels as I can't know the lengths
of the texts beforehand.

The width attribute only sets a *minimum* value for the column.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 20 '05 #4

P: n/a

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...
Ivo wrote:
Consider a table with a number of rows, each containing a
short text (label) on the left and an input control on the
right. Some inputs are of type text and others of type
checkbox. I would like the cells with the checkboxes to be
as narrow as possible (square) but in this table the
"width=10" bit seems to get ignored:

<table border="1">
<tr>
<td>some text</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td colspan="2">more text</td>
<td width="10"><input type="checkbox"></td>
</tr>
</table>

What am I doing wrong?


Nothing, really, (I think!), but you didn't define the "middle
cell".
If you put this:
<tr><td></td><td></td><td></td></tr>
right above the first <tr>, it does work in Firefox.
Colspan is a bit tricky, and different browsers act
differently with it.
I've learned to set all widths in the first line which has
only td's without colspan, then use colspan as you see fit on
the cells in the rows below.
You can make that first row invisible if you'd use CSS.


The COL element is available for just this purpose, rather than using an
invisible row.

Jul 20 '05 #5

P: n/a
Els
Harlan Messinger wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...
Ivo wrote:
> Consider a table with a number of rows, each containing
> a short text (label) on the left and an input control on
> the right. Some inputs are of type text and others of
> type checkbox. I would like the cells with the
> checkboxes to be as narrow as possible (square) but in
> this table the "width=10" bit seems to get ignored:
>
> <table border="1">
> <tr>
> <td>some text</td>
> <td colspan="2"><input type="text"></td>
> </tr>
> <tr>
> <td colspan="2">more text</td>
> <td width="10"><input type="checkbox"></td>
> </tr>
> </table>
>
> What am I doing wrong?


Nothing, really, (I think!), but you didn't define the
"middle cell".
If you put this:
<tr><td></td><td></td><td></td></tr>
right above the first <tr>, it does work in Firefox.
Colspan is a bit tricky, and different browsers act
differently with it.
I've learned to set all widths in the first line which has
only td's without colspan, then use colspan as you see fit
on the cells in the rows below.
You can make that first row invisible if you'd use CSS.


The COL element is available for just this purpose, rather
than using an invisible row.


Must admit, never used it. So I'll just take your word for
that :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.