如何在不同tr的td之间添加边框？

Question

为了简化我的问题，我写了下面的html和css来进行概述。 我想在A / C和B / D之间添加边框。 我怎样才能做到这一点 ？ 如果我不清楚我的问题，请告诉我。 谢谢。

 table.test { border-collapse: separate; border-spacing: 10px; width: 100%; } .tdLeft { vertical-align: top; width: 390px; } .tdRight { padding-left: 4px; width: 390px; vertical-align: top; border-left: solid; border-width: 1px } 

 <table class="test"> <tr> <td class="tdLeft"> <td>A</td> <td>B</td> </td> </tr> <tr> <td class="tdRight"> <td>C</td> <td>D</td> </td> </tr> </table> 

Answer 1

首先，您需要删除围绕td的td标签，其中包含数据。 td没有嵌套。 如果要分配适用于给定tr中所有td的类，请将该类分配给tr。

现在添加边框：我们可以使用简单的CSS来做到这一点，并为您的html添加一个类：

<table class="test">
  <tr class="firstRow">
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

以下CSS为您提供了两条截然不同的行-A在A下，B在B下。

table.test {
  border-collapse: separate;
  border-spacing: 10px;
  width: 100%;
}

.tdLeft {
  vertical-align: top;
  width: 390px;
}

.tdRight {
  padding-left: 4px;
  width: 390px;
  vertical-align: top;
}

.firstRow td {
    border-bottom: 1px solid red;
}

如果要在两个单元格下面有一条连续线（在整行下划线），则需要调整CSS的其他部分-删除border-spacing，并将border-collapse设置为塌陷：

table.test {
  border-collapse: collapse;
  width: 100%;
}

.tdLeft {
  vertical-align: top;
  width: 390px;
}

.tdRight {
  padding-left: 4px;
  width: 390px;
  vertical-align: top;
}

.firstRow td {
    border-bottom: 1px solid red;
}

Answer 2

我不知道为什么要在另一个<td>中添加<td>

相反，你可以做

<table class="test">
   <tr class=row>
     <td>A</td>
     <td>B</td>  
   </tr>
   <tr>
      <td>C</td>
      <td>D</td>
   </tr>
</table>

的CSS

tr:nth-child(1)>td{
    border-bottom:1px solid #CCC;
}

table.test{
  border-collapse: collapse;
  width: 100%;
}

JsFiddle

更新了JsFiddle

Answer 3

您可以使用table-border = 1px; 很简单！

Answer 4

也许这样的事情可以解决问题：

html

<table class="test">
  <tr>
      <td>
      <td class="tdLeft">A</td>
      <td>B</td>
      </td>
  </tr>
  <tr>
      <td>
      <td class="tdRight">C</td>
      <td>D</td>
          </td>
  </tr>
</table>

CSS：

table.test {
  border-collapse: separate;
  border-spacing: 10px;
  width: 100%;
}
.tdLeft {
  vertical-align: top;
  border-bottom: 1px solid;
  width: 390px;
}
.tdRight {
  padding-left: 4px;
  width: 390px;
  vertical-align: top;
  border-left: solid;
  border-width: 1px;
  border-bottom: 1px solid;
}

http://jsfiddle.net/n197somp/1/

Answer 5

我猜你可以像这样<table class="test" border=1px>