仅对表体行应用边框间距

时间:2015-08-21 09:17:05

标签: html css

我有一个包含2个标题行和多个正文行的表。我希望正文中行之间的间距为10像素。我通过以下方式实现这一目标:

border-collapse: separate;
border-spacing: 10px;

但是,这显然也适用于标题中的行。但是对于标题,我希望行之间没有空格。我的HTML是:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
  border-spacing: 10px;
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

小提琴是here。我希望第一个标题行的底部和第二个标题行的顶部之间没有空格。我已经尝试将border-spacing仅应用于正文,但它只适用于表级。有什么想法吗?

5 个答案:

答案 0 :(得分:3)

border-spacing已应用于table elements,无法单独定位tbody,但您可以尝试以下CSS黑客并将border: white应用于td }元素创建边际效应。

附加代码:

table td {
  border: 10px solid white;
  border-right: 0;
  border-left: 0;
}

<强>输出:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
  border: 10px solid white;
  border-right: 0;
  border-left: 0;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分:0)

尝试使用填充/边框间距在CSS中创建一个类

.tableClass>tbody>tr>td {
  padding: 12px 12px 12px 12px;
}

这通常对我有用

答案 2 :(得分:0)

我认为这是如何实现的。

&#13;
&#13;
table.test td {
    background-color: lime;
    //margin: 12px 12px 12px 12px;
   padding: 12px 12px 12px 12px;
}

table.test th{
    background-color: red;
    padding: 12px 12px 12px 12px;
}

table.test tbody{
  border-collapse: separate;
  border-spacing: 10px;
  position:absolute; 
  *border-collapse: expression('separate', cellSpacing = '10px');
}
&#13;
<table class="test">
    <thead>
        <tr>
            <th>head 1</th>
            <th>head 1</th>
            <th>head 1</th>
        </tr>  
        <tr>
            <th>head 2</th>
            <th>head 2</th>
            <th>head 2</th>
        </tr>
    </thead>    
    <tbody>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
</table>
&#13;
&#13;
&#13;

下面是更新的jsfiddle

<强> Jsfiddle

答案 3 :(得分:0)

作为一个古老的问题,但有多余之处,

您可以使用transformbox-shadowposition在两行(或更多行)之间折叠伪造

  • 转换:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

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

thead tr:first-of-type {
  transform: translatey(10px)
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

  • 位置:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

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

thead tr:first-of-type {
  position:relative;
  top:10px
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

  • box-shadow:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

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

thead tr:first-of-type th {
  box-shadow:0 10px red
}
<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

答案 4 :(得分:0)

.table th{
  background-color: red;
  padding: 12px;
}
  
.table td {
  background-color: green;
  padding: 12px;
}
.tablerow {
  border-bottom: 20px solid blue;
}
<table class="table">
  <thead>
      <tr class="tablerow">
          <th>head 1</th>
          <th>head 1</th>
          <th>head 1</th>
      </tr>
  </thead>    
  <tbody>
      <tr class="tablerow">
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
      </tr>
      <tr class="tablerow">
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
      </tr>
  </tbody>
</table>

一切正常。它在行的底部放置了一个 20px 的边框,可以用作行之间的间距,您也可以应用全边框。

https://www.w3.org/TR/CSS2/tables.html