How do I eliminate the gap on the right of an input box within a TD
Consider this simple HTML:
<html>
<body>
<!-- Table for reference purposes -->
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<tr>
<td>100px</td>
<td>100px</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<tr>
<td><input style="width:100px"/></td>
<td>100px</td>
</tr>
</table>
</body>
</html>
The table on the top is for reference only, so you can see what I expect. In the table at the bottom there is a large gap to the right of the input. Why is it there, and how can I get rid of it without reducing the size of the input too much?
Thanks, Stephen
Some of you have answered that I should set the width of the TD's, so I've done this, but the two tables still don't line up. How can I fix this without reducing the size of the input too much? (I don't want the gap on the right of the input)
<html>
<body>
<!-- Table for reference purposes -->
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<tr>
<td style="width:100px">100px</td>
<td style="width:100px">开发者_如何学运维;100px</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<tr>
<td style="width:100px"><input style="width:90px"/></td>
<td style="width:100px">100px</td>
</tr>
</table>
</body>
</html>
I've uploaded this example to http://losthobbit.net/temp/testx.html temporarily, so you can see exactly what I'm talking about.
The problem is that <input> elements have extra padding, borders, and margins that make it wider than what you say it should be. You can either remove the extra stuff so that the input is flush with the table cell, or make the width of your input smaller.
I was able to get it lined up with the following HTML on the second table:
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<tbody><tr>
<td><input style="width:97px;margin:0 !important;padding:0; float: left;"></td>
<td style="width:100px">100px</td>
</tr>
</tbody></table>
Why not
<td><input style="width:90px"/></td>
Or
<td><input size="11"></td>
Set the width on the first <td> in the table.
<td style="width:100px;">
Since u have specified a fixed width for the table, I think the first table cell will try to take up the maximum space. If u have to specify a table width, then specify a width for the cell too.. that way the space wont appear
I found a solution to my problem: Reduce the size of the TD's, keeping the tables the same width, e.g:
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<tr>
<td style="width:97px"><input style="width:90px"/></td>
<td style="width:97px">100px</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<tr>
<td>100px</td>
<td>100px</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<col span="2" width="100px">
<tr>
<td><input style="width:95%"></td>
<td>100px</td>
</tr>
</table>
using <col> to set the widths then reducing the input width to a smaller percentage to allow room for it's borders and padding makes the two tables line up for me
加载中,请稍侯......
精彩评论