Collapsing tables via CSS
Permalink
When I add border-collapse: collapse; to the style of my table, nothing happens when a row of cells is blank.
I tried adding the style via the HTML editor as an in-line style within the table tag <table style="border-collapse: collapse;" >.
Then, I tried adding the style to a class ("collapse") I created via the Design link, then made the table part of that class via the HTML editor <table class="collapse" ... >.
My row does not collapse in either case. What am I missing?
I tried adding the style via the HTML editor as an in-line style within the table tag <table style="border-collapse: collapse;" >.
Then, I tried adding the style to a class ("collapse") I created via the Design link, then made the table part of that class via the HTML editor <table class="collapse" ... >.
My row does not collapse in either case. What am I missing?
Thank you for your reply. I followed your link to the w3schools.com site, but that example does not show what happens when all text is removed from all the cells in a row.
I had gone tohttp://www.w3schools.com/css/css_table.asp... and played with the top example which shows the table collapsing in size as if the row did not exist. If you try the example with a 1 px border you can see the border for the first row remain in place, but become much "shorter." Changing the border from 1 px to 0 px seems to make the collapse even greater.
I could be wrong about this (I have been wrong before...), but it seems to me that there has to some CSS that can do this. Maybe display:none ?
I had gone tohttp://www.w3schools.com/css/css_table.asp... and played with the top example which shows the table collapsing in size as if the row did not exist. If you try the example with a 1 px border you can see the border for the first row remain in place, but become much "shorter." Changing the border from 1 px to 0 px seems to make the collapse even greater.
I could be wrong about this (I have been wrong before...), but it seems to me that there has to some CSS that can do this. Maybe display:none ?
HTML tables aren't that "smart." Even the example that you tried does maintain a small area for the 1st row of cells, as those have been defined in the markup. Setting the border to 0 px removes the borders entirely.
The first thing I'd try is simply removing empty rows of data if you're working with a query.
Or, if you can live without grid lines, that would be the way to go after the fact. However, you can run into problems with rows that have incomplete data -- as the registration may get out of whack.
The first thing I'd try is simply removing empty rows of data if you're working with a query.
Or, if you can live without grid lines, that would be the way to go after the fact. However, you can run into problems with rows that have incomplete data -- as the registration may get out of whack.
Growthcurve posted a good howto on responsive tables:
http://www.concrete5.org/documentation/how-tos/designers/make-respo...
http://www.concrete5.org/documentation/how-tos/designers/make-respo...
https://developer.mozilla.org/en-US/docs/CSS/border-collapse...
For a visual example:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-...