Question

我有一个表行，每个单元格中都有一个用于过滤列的输入字段。

如何从此行中的td中删除所有填充，以便输入字段边框和包含它们的td之间没有多余空格？目前，包含输入字段的td因此而显得更大。

注意：这只是一个特定行所需，所有其他行将保持标准格式。

我的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>

非常感谢你提供任何帮助，蒂姆。

Answer 1

首先将一个类添加到：

<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>

然后在你的CSS中：

.noPadding td { padding: 0; }

如果您发现仍然有额外的间距，那么可能会有一些边距应用于输入本身（取决于您的其他CSS /浏览器默认值），如果值得尝试的话：

.noPadding td input { margin: 0; }

希望这有帮助。

Answer 2

看起来你所看到的是默认情况下由表单字段创建的边距，请尝试：

将Css放在头部的样式标签中：

.noMargin { margin: 0; }

提示：您可以为空格分配一个减去值的余数，在本例中为：

.noMargin { margin: -2px; }

为我工作（使用safari，但会因浏览器而异）

你的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>

我希望这会有所帮助。

Answer 3

您可以使用jquery删除所有包含文本输入框的表tds的填充

$(function () {
    $('.myTable').find(':text').parent('td').css('padding','0');
});

如http://jsfiddle.net/WTBsp/1/

所示

CSS：使用输入字段从单元格中删除所有填充

3 个答案: