margin-right 在桌子上不起作用答案

【问题标题】：margin-right doesn't work on a tablemargin-right 在桌子上不起作用
【发布时间】：2013-11-03 04:43:53
【问题描述】：

这是fiddle。

为什么td.mar 的 CSS 不起作用？
或者：如何让表格在右侧与屏幕边框保持距离？

编辑： 对于任何可能正在寻找答案的人： display: block 和 border-collapse: collapse 正在禁用 margin-right 属性

【问题讨论】：

它确实有效。不知道你在那边看到了什么。

标签： css html-table margin

【解决方案1】：

您可以在桌子上使用padding-right ?px;。

查看：http://jsfiddle.net/s9pF5/11/

【讨论】：

我看到它有效，但不知何故不适用于我的桌子。现在我知道是 display: block 和 border-collapse: collapse 禁用了 margin-right 属性

【解决方案2】：

如果您希望 table 具有右侧边距，则应将该边距右应用于 table，而不是 td。

【讨论】：

【解决方案3】：

您可以创建一个 td 并 编写 css 像这样 CSS

.noBorderwithMargin{border:0;padding:0;margin:0;padding-left:50px;}

HTML

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

Live Demo

【讨论】：

this 不是我所需要的，表格和屏幕边框右侧之间仍然没有空间

【解决方案4】：

把桌子包起来怎么样？

HTML：

<div class="margin">
<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>
</div>

CSS（添加了两种样式）：

table {
    width: 100%
}
div.margin {
    margin-right: 50px;
}

Jsfiddle

【讨论】：