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?