473,398 Members | 2,188 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,398 software developers and data experts.

table cell size

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
5 30189
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 vão. O resto é imperfeito.
- Renato Russo -
Now playing: Meredith Brooks - I'm A Bitch
Jul 20 '05 #2
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
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

"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
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 vão. O resto é imperfeito.
- Renato Russo -
Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Spanky | last post by:
Thanks for any help in advance! I have this order form where you add rows as you need them. The routine to add fields is working fine. I am trying to add the ability to delete rows if you...
10
by: Andrew Thompson | last post by:
http://www.physci.org/test/chem/element.html, represents information on a chemical element. (http://www.physci.org/test/chem/ for the CSS's) Not yet coded for links to other forms of the...
19
by: Craig | last post by:
I have a 3rd party product that is quite old. It produces reports dynamically via the web. It users templates to do this. They are very basic, one looks like this. <html> <head>
2
by: David Bradbury | last post by:
I currently have an iframe on a webpage into which users can insert content. They can further customise the text as I've included buttons such as Bold, Italic, Bullet point etc. This is done along...
1
by: Thanks | last post by:
I have a routine that is called on Page_Init. It retrieves folder records from a database which I display as Link Buttons in a table cell. I set the table cell's bgcolor to a default color (say...
1
by: Jeronimo Bertran | last post by:
I am creating a table and inserting an iframe inside a cell for which the width depends on the screen size. The table has 7 columns and the fourth column is resized depeding on the screen...
7
by: Shawn B. | last post by:
Greetings, I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then...
0
by: Thomas Scheiderich | last post by:
I have a table that has 3 image slices. The middle slice changes size based on size of browser window. This works great. My client wants the date to show over the image on the right. So what I...
1
by: vp.softverm | last post by:
hi all . Am facing problem with the date picker. when i click on date picker in a popup window. the date table is opened in the middle of the pop up window. and it is unable to scroll with...
3
by: azegurb | last post by:
hi I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased. but i would like how create SUM function that automatically sums each added row...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.