CODEWITHSUNDEEP
javascripthtmlcss
HereToLearn_
HereToLearn_

Reputation: 1190

How to add border between td's in which are in different tr's?

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>

Upvotes: 0

Views: 78

Answers (5)

GaurabDahal
GaurabDahal

Reputation: 876

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

Upvotes: 1

Praveen Raj
Praveen Raj

Reputation: 1014

I guess you can give like this <table class="test" border=1px>

Upvotes: -1

Molnia
Molnia

Reputation: 60

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/

Upvotes: 0

Andrea
Andrea

Reputation: 849

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;
}

Upvotes: 2

abhinav singh
abhinav singh

Reputation: 29

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

Upvotes: 0

Related Questions