Home/ Questions/Q 805089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T00:01:36+00:00

BACKGROUND: I would like to have small labels in columns of a table. I’m

  • 0

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.

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As above, you can use:

    td {
 padding: 3px;
 vertical-align:top;
}

    If you wanted to retain the padding exactly, even on the invisible elements, you can force the hasLayout attribute on the empty span using:

    td {
 padding: 3px;
  vertical-align:top;
}

td sup {
 display: block;
}

td span {
 display: inline-block;
 margin: 3px 0px;
 text-align: center;
 width:100%;
}

    The inline-block technique is discussed extensively at Drawing empty inline boxes in CSS?

    • 0