如何在启用 bootstrap 的 html 表的元素之间添加间距？

Question

这个小提琴： https ://jsfiddle.net/DTcHh/10952/ 显示 8 个表格元素，但我无法在每个元素之间添加间距。

我试过了 ：

 cellpadding="3" cellspacing="3"

也：

 td:nth-child(2) {
    padding-right: 20px;
}

但这些选项似乎没有达到预期的效果。

 <div class="center">

  <div>
    <table class="table table-bordered" cellspacing="1">
      <tr>
        <td class="col-md-3">
          <div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

          <div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
          </div>

          <div class="date">test</div>
        </td>

        <td class="col-md-3" col-md-offset-2>
          <div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

          <div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
          </div>

          <div class="date">test</div>
        </td>

        <td class="col-md-3">
          <div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

          <div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
          </div>

          <div class="date">test</div>
        </td>

        <td class="col-md-4">
          <div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

          <div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
          </div>

          <div class="date">test</div>
        </td>
      </tr>

      <tr>
        <td class="col-md-3">
          <div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

          <div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
          </div>

          <div class="date">test</div>
        </td>

        <td class="col-md-3" col-md-offset-2>
          <div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

          <div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
          </div>

          <div class="date">test</div>
        </td>

        <td class="col-md-3">
          <div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

          <div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
          </div>

          <div class="date">test</div>
        </td>

        <td class="col-md-4">
          <div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>

          <div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
          </div>

          <div class="date">test</div>
        </td>
      </tr>

    </table>
  </div>

</div>

原文由 blue-sky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试添加以下内容：

 table {
    border-collapse: separate;
    border-spacing: 1em;
}

原文由 akoinesjr 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试添加这个：

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

原文由 Luna 发布，翻译遵循 CC BY-SA 3.0 许可协议