Last active
December 12, 2015 10:49
-
-
Save adambishop/4761644 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
<html> | |
<head> | |
<title>Empty Table CSS Example</title> | |
<style type="text/css" media="screen"> | |
td{border:1px solid black;padding:10px} | |
/* syntax 1, used to hide empty cells */ | |
table.syntax1{ | |
empty-cells:hide; /* << here */ | |
padding:10px; | |
border:1px solid black; | |
} | |
/* syntax 2, used to highlight empty cells red */ | |
table.syntax2 td:empty{ /* << here */ | |
border:1px solid red; | |
} | |
</style> | |
</head> | |
<body> | |
<p>Table with empty cells hidden, using syntax 1</p> | |
<table class="syntax1"> | |
<thead> | |
<tr> | |
<th>Col1</th> | |
<th>Col2</th> | |
<th>Col3</th> | |
<th>Col4</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>1</td> | |
<td>2</td> | |
<td></td> | |
<td>4</td> | |
</tr> | |
<tr> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
</tbody> | |
</table><br/> | |
<p>Table with empty cells highlighted red, using syntax 2</p> | |
<table class="syntax2"> | |
<thead> | |
<tr> | |
<th>Col1</th> | |
<th>Col2</th> | |
<th>Col3</th> | |
<th>Col4</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>1</td> | |
<td>2</td> | |
<td></td> | |
<td>4</td> | |
</tr> | |
<tr> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
</tbody> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment