CODEWITHSUNDEEP
htmlcssbordercss-tables
Fryndorfer
Fryndorfer

Reputation: 91

How to show TableRow's border, but not TableCells'

I'm working on a dynamically generated table atm. The CSS-File looks like this:

...
td {
    border: 1px solid white;
} 

tr {
    border: 1px solid black;
    font-family: Arial;
}

table {
    width: 850px;
    border-spacing: 8px 8px;
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
...

I don't want to see the border of the cells, BUT the cells need to be there, because they are a placeholder, so I change their color to white. My problem is that I don't know why the border of the rows won't get displayed. Or let's say, is it possible to display the row's border, but not the cells'?

Upvotes: 0

Views: 40

Answers (3)

Aember
Aember

Reputation: 124

Since different browsers behave differently, where table borders are concerned, I found it always more consistent, to put the borders to the top/bottom of the cells instead of the rows:

td {
  border-bottom: 1px solid #000;
}

Since this will draw the top border of each cell, it will look like the row has a border(-bottom).

To add another border to the very top:

tr:first-child td {
  border-top: 1px solid #000;
}

Finally, if you need the left and right borders too, add them to the first/last cell of each row:

td:first-child {
  border-left: 1px solid #000;
}
td:last-child {
  border-right: 1px solid #000;
}

Sorry, if this looks clumsy, but in my experience this will work better than trying to force the rows to display a correct border.

Upvotes: 2

Zubair sadiq
Zubair sadiq

Reputation: 500

tr{
   outline : 1px solid black;
}

Upvotes: 0

satya
satya

Reputation: 1185

Please try this:

tr {
    outline: thin solid black
    font-family: Arial;
}

Upvotes: 0

Related Questions