如何在引导表中添加带边框的两行之间的空间答案

【问题标题】：How to add space between two rows with border in bootstrap table如何在引导表中添加带边框的两行之间的空间
【发布时间】：2018-01-02 17:06:09
【问题描述】：

table{ width: 100%;max-width: 100%;  margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;}

tbody tr{border:2px solid #256ac4;}
td{    color: #8d9097; vertical-align: top; font-size: 14px;}
th{text-align:left}

<table>
<thead>
     <th>A</th>
     <th>B</th>
     <th>C</th>
</thead>
<tbody>
  <tr>
    <td>AA</td>
     <td>AA</td>
      <td>AA</td>
  </tr>
 <tr>
    <td>AA</td>
     <td>AA</td>
      <td>AA</td>
  </tr>
 <tr>
    <td>AA</td>
     <td>AA</td>
      <td>AA</td>
  </tr>

</tbody>

</table>

我已经对此进行了编码，预期结果在图像中，但我无法在两行之间添加空格，如果我使用边框折叠：分隔则空间即将到来但边框不适用。

https://ibb.co/b9WDn5

【问题讨论】：

请添加一个最小的工作示例，以便我们告诉您可以更改的内容。没有我们就不可能向您解释。如果您只需要行之间的空间，那么创建例如。之后的伪行。
在这里分享您的代码？或创建一个 sn-p 或小提琴
能否分享一下你正在使用的table、td和tr相关的css
请添加一个最小的工作

标签： html twitter-bootstrap

【解决方案1】：

您应该在内容所在的位置添加 div 并设置样式以创建行之间的间隙。

因此，如果我们从您的示例中获取代码，它将变成这样。

HTML

<table>
  <thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
    </tr>

  </tbody>

</table>

CSS

table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}

td {
  color: #8d9097;
  vertical-align: top;
  font-size: 14px;
  padding: 0;
}

td div {
  margin-bottom: 10px;
  border: 2px solid #256ac4;
}

td:first-child div {
  border-left-width: 2px;
}

td:last-child div {
  border-right-width: 2px;
}

thead {
  border: solid 1px #000;
}

th {
  text-align: left
}

https://jsfiddle.net/nvbza1u3/1/

注意边框是如何添加到div 而不是tr。我还为thead 添加了边框，使其看起来更像您的示例

【讨论】：

如果内容不同，每个td的结构也会变得不匹配

【解决方案2】：

我已经用 float:left 解决了这个问题，用这个 sn-p 检查一下

   * { box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; }
table {
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
   border: solid 1px #000;
   border-collapse: collapse;
   float:left;
}
thead {
   float: left;
}
tbody tr {
   border: 2px solid #256ac4;
   float: left;
   margin-bottom: 15px;
   width: 100%;
}
td {
   color: #8d9097;
   vertical-align: top;
   font-size: 14px;
}
th {
   text-align: left
}

<body>
<table>
  <thead>
  <th>A</th>
    <th>B</th>
    <th>C</th>
      </thead>
  <tbody>
    <tr>
      <td>AA</td>
      <td>AA</td>
      <td>AA</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>AA</td>
      <td>AA</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>AA</td>
      <td>AA</td>
    </tr>
  </tbody>
</table>

【讨论】：

但是全宽表格的结构现在不匹配
那是因为 box-sizing 问题现在已修复

【解决方案3】：

在父表中，尝试设置

border-collapse:separate; 
border-spacing:5em;

尝试推荐this。

【讨论】：

我试过了。间距即将到来，但我在表格行（tr）中添加的边框消失了