Question

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>

我编码了这个，预期的结果是在图像中但我无法在两行之间添加空间，如果我使用border-collapse：单独然后空间即将到来但是边框不适用。

https://ibb.co/b9WDn5

Answer 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，使其看起来更像您的示例

Answer 2

在父表中，尝试设置

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

尝试引用this。

Answer 3

我已使用float:left解决了此问题，请查看此代码段

＆＃13;

   * { 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
}

＆＃13;

<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>

＆＃13;

如何在bootstrap表中添加带边框的两行之间的空格

3 个答案: