Border around specific rows in a table?

html css border css-tables
Kyle Cronin picture Kyle Cronin · Mar 22, 2009 · Viewed 301.1k times · Source

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 yet.

Anyways, I have a table with multiple rows and columns, some merged with rowspan and colspan, and I'd like to put a simple border around parts of the table. Currently, I'm using 4 separate CSS classes (top, bottom, left, right) that I attach to the <td> cells that are along the top, bottom, left, and right of the table respectively.

Is there any easier way to do what I want? I tried applying top and bottom to a <tr> but it didn't work. (p.s. I'm new to CSS, so there's probably a really basic solution to this that I've missed.)

note: I do need to have multiple bordered sections. The basic idea is to have multiple bordered clusters each containing multiple rows.

Answer

enigment picture enigment · Jun 4, 2013

How about tr {outline: thin solid black;}? Works for me on tr or tbody elements, and appears to be compatible with the most browsers, including IE 8+ but not before.

Related questions

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 …

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