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?
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
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:
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
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.
You could lift Mozilla's implementation of the
rules
attribute, which is entirely in CSS:http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l289 and http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l337 are the styles, going on through line 410.
Simple Example: http://jsfiddle.net/xixionia/v3eVq/
Simple Table (albiet without tbody):
Simple CSS (albiet not completely compatible with all browsers):
Psuedo-selector reference on W3 Schools: http://www.w3schools.com/css/css_pseudo_classes.asp
Instead of using psuedo-selectors:
You can set a class for each first-child and last-child, and use that class as your selector.
The HTML5 spec has CSS rules in it’s section “Rendering“. Just pick the
rule
value you're looking for and fetch the corresponding CSS. Let me copy and paste the rules for<table rules=...>
:Note: the "i" in the attribute selector is CSS4 and ignores case. I.e.
rules=ROWS
is as good asrules=rows
.