Set inner table border in HTML

html css border css-tables
ripper234 picture ripper234 · Apr 17, 2010 · Viewed 64.4k times · Source

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?

Answer

dalgard picture dalgard · Aug 31, 2014

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

Related questions

Border around specific rows in a table?

I'm trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I'm not really supposed to use tables for layout but I don't know enough CSS to completely replace it …

Read More
Outline table row on hover

I am trying to highlight the border of a table row on hover. Unfortunately this only works for the first row of cells. Lower rows have one border that does not change color. I have tried using outline but it …

Read More
Non Uniform Dashed Border in Table Cells

I have applied CSS border-bottom:1px dashed #494949; on several consecutive cells of a single row of an HTML table, but the border is not uniform. The dashes at the end of each cell appear little longer. Dotted border is also …

Read More