CODEWITHSUNDEEP
htmlcssbordercss-tables
ripper234
ripper234

Reputation: 229988

Set inner table border in HTML

How do I set the "inner border" - the border between different cells.

By setting style attributes I manage to control the outer border, but the inner border just stays the same gray color and the same width. What attributes should I tweak to control the inner border?

Upvotes: 20

Views: 69097

Answers (2)

daLizard
daLizard

Reputation: 430

You need to style the <td> element.

Take a look at the W3C website

Upvotes: 4

dalgard
dalgard

Reputation: 3654

For ordinary table markup, here's a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

For IE 7 support, add this:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

A test case can be seen here: http://codepen.io/dalgard/pen/wmcdE

Upvotes: 15

Related Questions