CSS: Этикетки в столбцах таблицы

ФОН:CSS: Этикетки в столбцах таблицы

Я хотел бы иметь небольшие этикетки в столбцах таблицы. Я использую некоторые реализованные части HTML5/CSS3 в своем проекте, и этот раздел специально предназначен для мобильных устройств. Хотя оба факта не обязательно релевантны, суть в том, что мне не нужно поддерживать Internet Explorer или даже Firefox, если на то пошло (только WebKit).

ПРОБЛЕМА

С моим текущим подходом CSS, вертикальное заполнение ячейки происходит от < span> элемент (установлено в display: block с верхним/нижним полей), который содержит «ценность» колонка. В результате нет прокладки, когда <span> пуст или отсутствует (нет значения), а метка не установлена.

«Полные» coulmns должны дать вам представление о том, где я хочу, чтобы метки были, даже если нет значения, а <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>

источник

2010-05-24 hello

Как указано выше, вы можете использовать:

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

Если вы хотите сохранить отступы точно, даже на невидимых элементов, вы можете заставить атрибут hasLayout на пустой промежуток с помощью:

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

td sup { 
display: block; 
} 

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

Техника встроенного блока подробно обсуждается на Drawing empty inline boxes in CSS?

источник

2010-05-24 18:07:52

CSS: Этикетки в столбцах таблицы

ответ

Смежные вопросы