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下方，另一条位于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的其他部分 - 删除边框间距，并设置边框折叠以折叠：

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

我不知道你为什么要添加＆lt; td＆gt;在另一个＆lt; td＆gt;

中

相反，你可以做

<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

Updated JsFiddle

Answer 3

你可以使用表边界= 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>

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

5 个答案: