CODEWITHSUNDEEP
htmlcss
bɪˈɡɪnə
bɪˈɡɪnə

Reputation: 1085

How to have vertical line between table cells?

In the code below I want to have vertical line between cells, What is the best way to do that? Somethings I tried are giving background color to table but its something same as giving border to table cell, then tried border-left or border-right but it will give one extra line outside cell. Here I want vertical line between cells. Please help. 

table tr td {
  background-color: #dedede;
  color: black
}
<table>
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

Upvotes: 2

Views: 17834

Answers (5)

StudioTime
StudioTime

Reputation: 24019

Like this? This adds a border to every table tr td except the last one in the row

table tr td {
  border-right: 1px solid blue;
  color: black
}

table tr td:last-of-type {
  border: none;
}
<table>
  <tr>
    <td>this is the first cell</td>
    <td>this is the second cell</td>
    <td>this is the third cell</td>
  </tr>
  <tr>
    <td>this is the fourth cell</td>
    <td>this is the fifth cell</td>
    <td>this is the sixth cell</td>
  </tr>
</table>

As mentioned by Daniel A. White - last-child also works:

table tr td:last-child {
  border: none;
}

Upvotes: 6

Mofarjul Molla
Mofarjul Molla

Reputation: 114

table tr td+td {
  border-left: 1px solid blue;
  color: black
}
<table>
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

Upvotes: 0

Ayoub Abid
Ayoub Abid

Reputation: 452

table tr td {
   border-right: 1px solid black;
}
table tr td:nth-child(3n){
    border-right: none;
}

Upvotes: 1

DebRaj
DebRaj

Reputation: 599

You can apply CSS border to your td and add cellspacing="0" cellpadding="0" to remove the gap between td

HTML:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

CSS:

table{
  padding: 0;
  background-color: #dedede;
  color: black;
}
table tr td{
  padding: 5px;
  border-right: 1px solid red;
}
table tr td:last-child{
  border-right: none;
}

Fiddle: https://jsfiddle.net/debraj/1ehubox9/

Upvotes: 3

Jeroen
Jeroen

Reputation: 1262

Adding a border to the right of the cells and a border to the left of the table should do it:

table tr td {
  border-right: 1px solid #dedede;
  color: black
}

table {
  border-left: 1px solid #dedede;
}
<table>
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

Upvotes: 0

Related Questions