跨浏览器向表格添加边距的方式？答案

【问题标题】：Cross-browser way to add a margin to a table?跨浏览器向表格添加边距的方式？
【发布时间】：2013-11-01 19:49:00
【问题描述】：

我的一张表有 23 列，因此在大多数屏幕上它会溢出屏幕宽度。这没什么大不了的，只是我希望表格在窗口边框之前保持最小空间。
margin-left 有效，但不知何故，margin-right 不适用于table，tr，甚至最后一行的td。我已经通过在span 结束之前在span 中添加一个文本来解决它：

<tr>(...)<td>(...)</td><span class='tableMarginRight'>XXXXX</span></tr>

.tableMarginRight {
  visibility: hidden;
}

它适用于 Opera 和 Chrome，但不适用于 Firefox。有人有其他想法吗？

编辑：FIDDLE

【问题讨论】：

您能否添加实际表格（只有几行）和 css 的“样本”，以便我们可以稍微摆弄一下并更好地帮助您？抱歉，我们很懒，至少是我 xD
有在线示例吗？拥有更多 HTML/CSS 上下文可能会更好。
fiddle - 你可以在这里看到margin-right td.mar 不起作用

标签： html css html-table margin

【解决方案1】：

填充和边距在 tr 上不起作用。如果您想添加一些空间，请尝试将其应用于 TD。保证金不起作用。

<table border=1>
    <tr>
        <td class="pad-l">item</td>
        <td class="pad-r">item</td>
        <td class="pad-t">item</td>
        <td class="mar">margin</td>
    </tr>
</table>

.pad-l{
    padding-left: 20px;
}
.pad-r{
    padding-right: 20px;
}
.pad-t{
    padding-top: 20px;
}
.mar{
    margin: 30px 50px;
}

Check it here

【讨论】：

我也试过了，但只有在 Chrome 上看起来还可以。在 Opera 上我失去了边框，而在 Chrome 上 visibility:hidden 不起作用。

【解决方案2】：

可以使用边框间距和/或边框折叠来删除行和列之间的边距。表格/单元格和窗口之间的边框是正文边距，您可以使用以下命令将其删除：

body {
    margin: 0px   
}

【讨论】：

不行，td的边框不能用border-spacing去掉，我可以改，但不能去掉