Как следует из заголовка, я хочу иметь таблицу HTML, которая позволяет определять размеры столбцов и строк независимо от содержимого ячейки. Если строки недостаточно высоки или столбцы недостаточно широки, чтобы показать все содержимое ячейки, то это содержимое должно просто исчезнуть за ячейкой.
Я предложил следующее решение, которое отлично работает в chrome (17) и opera (11.61), safari (5), IE (9), но не в firefox:
th, td {
position: relative;
overflow: hidden;
}
td > span {
position: absolute;
top: 0px;
}
th > div {
position: relative;
}
(Конструкция такова, что каждый td содержит только span и любой «реальный» контент, например, текст внутри span в td. Кроме того, у каждой строки есть начальный th, и есть строка заголовка, содержащая только th , и все эти th содержат div. Устанавливая явную высоту и ширину DIV внутри th, я могу установить ширину и высоту строк.)
Следующий пример HTML иллюстрирует:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
table {
border-width: 1px;
border-style: none none solid solid;
}
th, td {
border-width: 1px;
border-style: solid solid none none;
}
th > div {
height: 18px;
width: 50px;
}
th, td {
overflow: hidden;
position: relative;
}
td > span {
position: absolute;
top:0px;
}
th > div {
position: relative;
}
</style>
</head>
<body>
<table
cellspacing="0"
cellpadding="0"
style="font-size: 10pt"
>
<thead>
<tr>
<th><div>Header0</div></th>
<th><div>Header1</div></th>
<th><div style="width:25px">Header2</div></th>
</tr>
</thead>
<tbody>
<tr>
<th><div>Header1</div></th>
<td
style="
vertical-align: bottom
"
>
<span style="
font-size:6pt;
background-color: red;
">A</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">B</span>
</td>
</tr>
<tr>
<th><div>Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">C</span>
</td>
<td>
<span style="
font-size:30pt;
background-color: green;
">D</span>
</td>
</tr>
<tr>
<th><div style="height:10px">Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">E</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">F</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Это прекрасно работает в Chrome и Opera, которые позиционируют диапазон относительно td (вот почему я дал им положение: относительное). Однако в Firefox положение: относительное значение td полностью игнорируется, а промежутки располагаются относительно первого предка над строками таблицы, которые имеют абсолютное или относительное положение. Таким образом, с учетом только приведенных выше правил верхняя часть промежутков приклеивается к верхней части тела документа, и если я добавлю:
table {
position:relative
}
вершины пролетов приклеены к верхней части стола. Но позиция: относительная, примененная к tr или td, кажется, полностью игнорируется.
Буду очень признателен за понимание рабочего решения.
UPDATE
Firefox просто не поддерживает положение: относительно ячеек таблицы. См. https://bugzilla.mozilla.org/show_bug.cgi?id=35168#c11. ИМО, это ошибка. Несмотря на аргументы, что «стандарт» говорит о том, что поведение этого параметра не определено, у других браузеров, по-видимому, нет проблем с его разумной и полезной реализацией, поэтому, на мой взгляд, действительно нет веской причины, почему Firefox хочет игнорировать это де-факто поведение.
После некоторых экспериментов я предложил два альтернативных решения, ни одно из которых не было бы идеальным, которые могут или не могут быть полезны для других, сталкивающихся с этой же проблемой.
1) Использование position: static для ячеек таблицы почти решает проблему в Firefox (без изменения поведения во всех других упомянутых браузерах). Однако если вы зададите положение: статическое для ячеек таблицы, то при установке text-align: прямо в ячейке таблицы возникает новая проблема. Принимая во внимание, что это снова работает отлично во всех других упомянутых браузерах (они отображают диапазон справа в ячейке), Firefox снова показывает другое поведение и показывает диапазон справа вне ячейки.
2) Использовать макет таблицы: фиксировано на таблице и помещать содержимое ячейки непосредственно в ячейку (не в отдельный span или div). Затем вы можете явно установить ширину и высоту в стиле элементов th (обратите внимание, что недостаточно задать ширину / высоту элемента div внутри элементов th - вам действительно нужно сделать это непосредственно для элемента th. подход, принятый в электронных таблицах Google docs. Этот подход позволяет содержимому ячейки быть шире, чем ячейка. Однако вы не можете сделать строку таблицы менее высокой, чем высота содержимого ячейки.