ФОН:
Я хотел бы иметь маленькие метки в столбцах таблицы.
Я использую некоторые реализованные части HTML5 / CSS3 в своем проекте, и этот раздел специально для мобильных устройств. Хотя оба факта не обязательно имеют отношение, суть в том, что мне не нужно поддерживать Internet Explorer или даже Firefox в этом отношении (только WebKit).
ПРОБЛЕМА
При моем нынешнем подходе к CSS вертикальное заполнение ячейки происходит от элемента <<code>span> (установлен на display: block с верхним / нижним полями), который содержит «значение» столбца. В результате нет заполнения, когда <span> пусто или отсутствует (без значения) и метка не на месте.
«Полные» кулмны должны дать вам представление о том, где я хочу разместить метки, даже если значения нет, а <span> там нет.
Я понимаю, что могу использовать «неразрывный пробел», но мне бы очень хотелось этого избежать.
Интересно, есть ли у кого-нибудь из вас способ исправить это? текущий код ниже.
<!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>