如何在启用引导的 html 表的元素之间添加间距？答案

【问题标题】：How to add spacing between elements of bootstrap enabled html table?如何在启用引导的 html 表的元素之间添加间距？
【发布时间】：2022-01-12 11:54:37
【问题描述】：

这个小提琴：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>

【问题讨论】：

你有一个你想要实现的例子吗？是单元格间距吗？
@WesFoster 是的，单元格间距
你会想在桌子上使用border-spacing

标签： html css twitter-bootstrap

【解决方案1】：

尝试添加以下内容：

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

【讨论】：

【解决方案2】：

尝试添加这个：

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

【讨论】：

【解决方案3】：

只需在所有表 th 或 td（第一列）中添加 <br/>。

 <tr>
    <td><br/>Firstname<span class="red">*</span></td>
      <td><input type="text" id="fname" name="fname"/></td>
      <td id="fnameError" class="red">&nbsp;</td>
  </tr>
  <tr>
      <td><br/>Lastname<span class="red">*</span></td>
      <td><input type="text" id="name" name="name"/></td>
      <td id="nameError" class="red">&nbsp;</td></tr>

这对我来说很好。 :D

【讨论】：

我发表评论是因为这是您第一次在 SO 上发帖。感谢参与！如果您查看问题的 cmets，您可能会猜到为什么您的答案可能没有被投票。尽管它可能是正确的，但似乎有一种方法可以对原始代码进行相当少的更改。每当您回答时，请考虑提出问题的人的声誉，以此作为他或她期望的答案水平的指南。欢迎登机。

【解决方案4】：

对于任何正在寻找更新答案的人，您可以从引导程序添加类，以帮助您向单元格添加填充/边距（例如 p-3、p-4 等）

更多信息可以在这里找到： https://getbootstrap.com/docs/4.4/utilities/spacing/

【讨论】：