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

Why <intput> tag overwrite the <td> tag

P: n/a
RC
I have a very sime html table like
<html><head><title>My Table</title>
<style>
input { margin: 0; padding: 0; border-width: 0;
text-indet: 0; text-align: left }
</style></head><body>

<table border="1" width="100%">
<caption>Table Title</caption>
<tr>
<th width="25%">Col1></th>
<th width="25%">col2</th>
<th width="25%">col3</th>
<th width="25%">col4</th>
</tr>

<tr>
<td width="25%">
<input type="text" name="name1" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name2" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name3" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name4" value="" size="2" />
</td>
</tr>

</table></body></html>

Everything is fine, except the table width is over 100% of window
browser width, the browser auto have a horizontal scroll bar at bottom.
So I can only see 80% of the table, need to scroll the horizontal scroll
bar right and left.

I have 17" LCD screen with 1280x1024 resolution, it is wide enough
for a such small table maximum length only 8 characters.

If I take out all the <input> tags inside the <td> tags, then I got
exactly what I want, 100% table show on the browser window without the
horizontal scrolling bar.

Why the <input> tag increase the width of <td> tag?
How can I see the 100% of table on browser window?

Thank Q very much in advance!

P.S. the reason I posted this in XML group.
Because this is XSLT convert from XML to HTML
Oct 6 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a

RC skrev:
I have a very sime html table like
<html><head><title>My Table</title>
<style>
input { margin: 0; padding: 0; border-width: 0;
text-indet: 0; text-align: left }
</style></head><body>

<table border="1" width="100%">
<caption>Table Title</caption>
<tr>
<th width="25%">Col1></th>
<th width="25%">col2</th>
<th width="25%">col3</th>
<th width="25%">col4</th>
</tr>

<tr>
<td width="25%">
<input type="text" name="name1" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name2" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name3" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name4" value="" size="2" />
</td>
</tr>

</table></body></html>

Everything is fine, except the table width is over 100% of window
browser width, the browser auto have a horizontal scroll bar at bottom.
So I can only see 80% of the table, need to scroll the horizontal scroll
bar right and left.

I have 17" LCD screen with 1280x1024 resolution, it is wide enough
for a such small table maximum length only 8 characters.

If I take out all the <input> tags inside the <td> tags, then I got
exactly what I want, 100% table show on the browser window without the
horizontal scrolling bar.

Why the <input> tag increase the width of <td> tag?
How can I see the 100% of table on browser window?

Thank Q very much in advance!

P.S. the reason I posted this in XML group.
Because this is XSLT convert from XML to HTML

Could it have something to do with your additional > after Col1 in this
line:
<th width="25%">Col1></th>
Otherwise, I don't seem to have any problem viewing the table in any
resolution.

Oct 6 '05 #2

P: n/a
Xandax wrote:
RC skrev:
I have a very sime html table like
Sime? Simple?
input { margin: 0; padding: 0; border-width: 0;
text-indet: 0; text-align: left }
text-indet is not valid CSS.
<th width="25%">Col1></th>

The extra > makes no difference to my browser.
Could it have something to do with your additional > after Col1 in this
line:
<th width="25%">Col1></th>
Otherwise, I don't seem to have any problem viewing the table in any
resolution.


I see it functioning correctly, even after I removed the invalid CSS
(and that >). Firefox 1.0.7

Methinks the OP is not telling the whole story. URL please?

--
-bts
-When motorcycling, never follow a pig truck
Oct 6 '05 #3

P: n/a
RC wrote:
I have a very sime html table like
[...]
Everything is fine, except the table width is over 100% of window
browser width, the browser auto have a horizontal scroll bar at bottom.
So I can only see 80% of the table, need to scroll the horizontal scroll
bar right and left.

It works fine here even after adding a DOCTYPE. Mozilla v1.7.12.
What browser are you using?
Post an URL demonstrating the problem.

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

This discussion thread is closed

Replies have been disabled for this discussion.