Hi,
Is there any way to make sure that a table and cells it contains have a border only when the cells are not empty? If all the cells of the table are empty, then no border should be visible.
Kind regards,
views:
1436answers:
6
+1
Q:
CSS Trick to show border on table and cells when cells are not empty and show no border otherwise
A:
Give the empty cells one class name and the non-empty ones another. One class specifies a border, the other without.
Diodeus
2008-11-26 19:08:59
Don't have control over the html. Just have control over the css and the class is applied to the table.
SharePoint Newbie
2008-11-26 19:14:53
A:
To the best of my knowledge, this isn't within the capabilities of CSS, the best option I can think of is to apply classes dynamically either through server-side code while populating the data, or through JavaScript once the page has been loaded into the browser.
Andrew Van Slaars
2008-11-26 19:09:09
You must be doing something wrong. See test case: http://liranuna.com/strager/empty-cells.html Make sure you are applying the empty-cells property to your td's and th's, not on the table itself.
strager
2008-11-26 19:23:42
But he is talking about table itself. Delete all content from your test case, and you will see little red rectange. I understand that asker wanted to see nothing: "If all the cells of the table are empty, then no border should be visible."
buti-oxa
2008-11-26 20:19:49
Ah, I misread the problem. Not really sure how this situation would come up, though; tables should at least have headers and such, in almost all cases, and DATA.
strager
2008-11-26 20:28:03
A:
It looks like the empty-cells property suggested by strager might do the trick. If it doesn't do what you need, I would look at using some clever javascript library like jQuery. You can probably set a hook to update the border style of the cell to be getBorderStyle(this) When the content of this cell change.
Look at the jquery "change" hook here: http://docs.jquery.com/Events/change If you select all your cells (which you can do using a css selector) and add a change hook to run some function you write called updateBorder() or some such, you should be good. I imagine it would be something like this:
$("table.someClass td").change(function() { updateBorder(this) })
Benson
2008-11-26 19:14:28
A:
Rendering of cell borders is partly dependant on if you are collapsing borders or not. If they are not collapsed border are not show by default if there is no cell content. This can be switched by using the CSS property empty-cells.
If you are collapsing borders you loose the abillity to control border display based on the presence of cell content.
Binarytales
2008-11-26 19:17:22
+1
A:
The only way to do this with pure CSS relies on a very modern browser. You'll need to use CSS advanced selectors to accomplish this. For example, you can use tr:empty to find the cells with no children elements in them, for plain text you'll need to do some more.
Unfortunately, these only exist in CSS3, so if you can't use javascript, or touch the markup, then you'll only be able to accomplish in the very latest browsers.
To learn more about CSS3 selectors Click Here
Jeremy B.
2008-11-26 19:23:41