Hello.
BACKGROUND:
I would like to have small labels in columns of a table. I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit).
THE PROBLEM
With my current CSS approach, the vertical padding of the cell comes from the <span> element (set to display: block with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <span> is empty or missing (no value) and the label is not in place.
The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <span> is not there.
I realize that I could use "non-breaking-space", but I would really like to avoid it.
I wonder if any of you have a fix / better way to do this? current code is below.
Thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>
body {
width: 320px;
}
/* TABLE */
table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }
/* RELEVANT STUFF */
td {
padding: 3px;
}
td sup {
display: block;
}
td span {
display: block;
margin: 3px 0px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">something</th>
</tr>
<tr>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span></span></td><!-- No content, just a label -->
</tr>
</table>
</body>
</html>