1

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

如何从该行中的 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>

非常感谢您对此提供的任何帮助，蒂姆。

4

3 回答 3

3

首先添加一个类：

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

希望这可以帮助。

于 2013-11-24T12:20:09.597 回答
0

看起来您看到的是默认情况下由表单字段创建的边距，试试这个：

将 CSS 放置在你的样式标签中：

.noMargin { margin: 0; }

提示：您可以将边距分配一个负值以在空间中占据更多优势，在这种情况下：

.noMargin { margin: -2px; }

为我工作（使用野生动物园，但会因浏览器而异）

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

我希望这有帮助。

于 2013-11-24T12:24:47.923 回答
-1

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

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

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

于 2013-11-24T12:26:27.597 回答