html - border-collapse、separate によるテーブルのインデントの防止

Question

私はいくつかの非常に基本的な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/でこのコードを参照してください。

Answer 1

使用する代わりにborder-spacing、テーブルにマージンを設定し、各行にパディングを設定して、テキストを左にフラッシュして同じ効果を得ることができます

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

Answer 2

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