防止带有边框折叠的表格缩进，分开答案

【问题标题】：Preventing indent of tables with border-collapse, separate防止带有边框折叠的表格缩进，分开
【发布时间】：2015-06-14 12:40:20
【问题描述】：

我有一些非常基本的html：

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<table>
    <tr>
        <th>Addressed to</th>
        <th>Sender</th>
        <th>Price</th>
        <th>Comments</th>
    </tr>
    <tr>
        <td>Joe smith</td>
        <td>Ralph Lauren</td>
        <td>$200</td>
        <td>Lorem ipsum dolor sit amer</td>
    </tr>
    <tr>
        <td>Joe smith</td>
        <td>Ralph Lauren</td>
        <td>$200</td>
        <td>Lorem ipsum dolor sit amer</td>
    </tr>
</table>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

现在，我想在表格行和列之间添加间距，所以我添加了这个 css：

table {
border-collapse: separate;
border-spacing: 20px 10px;
}

太好了。除了现在表格本身不再与 2 段齐平。

我的问题是表格如何获得所需的间距而不是缩进，或者如何应用最少的 CSS 来克服缩进？

在http://jsfiddle.net/smlombardi/9mzzdsrn/1/查看此代码

【问题讨论】：

标签： html css border-spacing

【解决方案1】：

对于一个快速的解决方案（特别是如果它是一个静态网站）只需将边距向后拉 20 像素（与桌子上的缩进相同）

margin-left:-20px;

here 是一个工作示例

【讨论】：

是的，我是这么认为的，但我的某些部分认为可能会有更“高科技”的方式。

【解决方案2】：

除了使用border-spacing，您可以只在表格上设置边距，然后还为每一行设置填充以实现与文本向左对齐的相同效果

table {
    border-collapse: separate;
    margin-right:20px;
}
td {
    padding-top:10px;
}

【讨论】：

【解决方案3】：

table {
    border-collapse: separate;
    margin-right:20px;
}
td {
    padding:10px;
}

【讨论】：