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

Question

To simplify my problem I wrote the below html and css to give an overview. I want to add border between A/C and B/D. How can I do that ? If I am not clear on my question then please let me know. Thanks.

 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

First of all, you need to remove the td tags that surround the td with data in them. td aren't nested. If you want to assign a class that will apply to all td in a given tr, then assign the class to the tr.

Now to add the border: we can do this with simple CSS, along with adding a class to your html:

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

The following CSS gives you two distinct lines - one beneath A, one beneath 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;
}

If you want to have a single continuous line beneath the two cells (underline the entire row), you need to adjust other parts of your CSS - remove the border-spacing, and set border-collapse to 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

I dont know why are you adding <td> inside another <td>

Instead you can do

<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

You can use table-border=1px; Simple !

Answer 4

Maybe something like this will do the trick:

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>