How can I emulate “<TABLE RULES>” with CSS?

Question

I'm writing a web application using ExtJS. I'm putting a table inside a table, and for various reasons it's impossible to refactor it all into one big table with rowspan/colspan, etc.

The "outside" table has borders around its cells. I'd like my "inside" table to have borders between its cells, so that I wind up with the effect of "splitting" the existing ("outside") cell.

If it makes things clearer, this is what I'm shooting for, as (poor) ascii art:

-----------------
|               |
|     |   |     |
|  -----------  |
|     |   |     |
|  -----------  |
|     |   |     |
|               |
-----------------

(The "inner" table looks like a tic-tac-toe grid; the "outer" table's cell has an unbroken border)

I looked around, and found a <table> attribute called RULES, which sounds like it does just this. However, it seems to be poorly supported, and anyway I'm not supposed to put style in markup (right?). The documentation I've found says "use CSS instead", but I can't seem to find a simple way of saying "put a border between cells, but not if the edge of the cell touches the outside of the table" in CSS. Help?

FWIW, I got a similar effect by forcing the containing cell to have no border and giving the "inner" table full borders, but I think not messing with the framework style would be cleaner... — Coderer
As I recall @rules didn't have quite that effect anyway. It didn't keep the borders from connecting, it... would have given you an effect somewhat like jsfiddle.net/rhyaniwyn/QNK55/1 by using border="1" rules="rows" — morewry

morewry morewry · Accepted Answer · 2011-05-04T17:56:53

This http://codepen.io/morewry/pen/GnBFu is about as close as I can get. I suspect there will be some support issues ~~and the alignment of the cells is off by the amount of the border-spacing~~.

table{
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0.25em;
    border:1px solid red;
}
    tr{
        display:block;
        border-bottom:1px dashed blue;
    }
    tr:last-child{ border:0; }
        td{
            padding-right:0.25em;
            vertical-align:top;
            border:1px dotted orange;
            border-width:0 1px;
        }
        td:first-child,
        td + td{ border-left:0; }
        td:last-child{ padding-right:0; border-right:0; }

Edit

Upon re-reading I realized you weren't looking for separated borders in a single table, but only to suppress the borders except between cells on a nested table. That's much simpler http://codepen.io/morewry/pen/yxvGg:

table{
    table-layout:fixed;
    border-collapse:collapse;
    border-spacing:0;
    border-style:hidden;
}
    td{
        padding:0.25em;
        border:1px solid black;
    }

Border conflict resolution states that the border-style:hidden takes precedence, so the only ones that appear in the collapsed model are between the cells.

The only issue here is that IE doesn't support hidden, so for IE you'd need workarounds. The pseudo-classes ought to work for IE8. I don't think IE7 supported :last-child, so it would need some extra help, and IE6 would need a workaround for both :first-child and :last-child.

For IE8 and IE7, the following will simulate border:hidden

table{ border:2px solid transparent; }

You'd get 2 extra pixels of transparent space in those browsers, but it's more efficient. IE6, as I recall, doesn't properly support transparent borders, it would still have issues. See http://codepen.io/morewry/pen/bIvJa.

How can I emulate “<TABLE RULES>” with CSS?

4 Answers