如何在不同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>