[英]CSS: remove all padding from cell with input field
I have a table row with an input field in each cell that is used to filter a column. 我有一个表行,每个单元格中都有一个输入字段,用于过滤列。
How can I remove all padding from the td's in this row so that there is no extra space between the input field borders and the td's containing them ? 我如何才能删除此行中td的所有填充,以便在输入字段边框和包含它们的td之间没有多余的空间? Currently the td's containing input field appear much bigger because of this.
因此,当前td的包含输入字段显得更大。
Note: This is just needed for one specific row, all other rows will stay standard-formatted. 注意:仅在特定的一行中需要这样做,其他所有行将保持标准格式。
My tr looks like this: 我的tr看起来像这样:
// ...
<tbody>
<tr>
<td><input type="text" name="input1" /></td>
<td><input type="text" name="input2" /></td>
<td><input type="text" name="input3" /></td>
</tr>
// ...
</tbody>
Many thanks for any help with this, Tim. 蒂姆,非常感谢您对此提供的任何帮助。
Firstly add a class to the : 首先将一个类添加到:
<tbody>
<tr class="noPadding">
<td><input type="text" name="input1" /></td>
<td><input type="text" name="input2" /></td>
<td><input type="text" name="input3" /></td>
</tr>
</tbody>
Then in your CSS: 然后在您的CSS中:
.noPadding td { padding: 0; }
If you find you're still getting extra spacing there may be some margins applied to the inputs themselves (depends on your other CSS / browser defaults) if so worth trying: 如果您发现仍然有多余的间距,则可以尝试对输入本身应用一些边距(取决于您的其他CSS /浏览器默认设置):
.noPadding td input { margin: 0; }
Hope this helps. 希望这可以帮助。
It looks like what you're seeing is margin created by the form fields by default, try this: 您似乎看到的是默认情况下表单字段创建的边距,请尝试以下操作:
Css to be placed in your style tags in the head: CSS放在您的样式标签的头部:
.noMargin { margin: 0; }
Hint: you can assign margin a minus value to reign in the space more, in this instance: 提示:在这种情况下,您可以为边距分配一个负值以在空间中占据更多位置,
.noMargin { margin: -2px; }
worked for me (using safari, but will vary by browser) 为我工作(使用野生动物园,但会因浏览器而异)
Your html: 您的html:
<tbody>
<tr>
<td><input type="text" name="input1" class="noMargin" /></td>
<td><input type="text" name="input2" class="noMargin" /></td>
<td><input type="text" name="input3" class="noMargin" /></td>
</tr>
</tbody>
I hope this helps. 我希望这有帮助。
You can use jquery to remove padding of all the table tds where it has text input boxes 您可以使用jquery删除所有具有文本输入框的表tds的填充
$(function () {
$('.myTable').find(':text').parent('td').css('padding','0');
});
as shown in http://jsfiddle.net/WTBsp/1/ 如http://jsfiddle.net/WTBsp/1/中所示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.