CSS, чтобы появилась граница пустой ячейки?
Какой CSS мне следует использовать, чтобы граница ячейки отображалась, даже если ячейка пуста?
В частности, IE 7.
проблема все еще актуальна в IE8 и IE9
Ответы 15
Если я помню, в некоторых IE ячейки не существует, если она чем-то не заполнена ...
Если вы можете поставить (неразрывное пространство), чтобы заполнить пустоту, это обычно сработает. Или вам нужно решение на чистом CSS?
Судя по всему, IE8 по умолчанию показывает ячейки, и вам нужно скрыть это с помощью empty-cells:hide. Но в IE7 он вообще не работает (который по умолчанию скрывается).
Чистый CSS было бы неплохо. У меня там уже есть nbsps, но он кажется грязным. :)
Насколько я знаю, это единственное решение, это то, что мы делаем.
Я бы не стал этого делать. Вместо этого добавьте <span style = 'width: 0px;'> </span>. Установка & nbsp; вызовет проблемы с Firefox при увеличении.
Вау, это отличный маленький совет wbkang.
Думаю, с помощью CSS этого сделать нельзя; Вам нужно поставить & nbsp; в каждой пустой ячейке для отображения границы в IE ...
Я только что нашел следующее. Он соответствует стандартам, но не работает в IE. вздох.
empty-cells: show
Тем не менее, он работает в IE8, так что просто дайте ему около десяти лет, и все готово.
Забавно, что это также работает для стандартного html <table> в IE6, но не для таблицы ASP.NET :)
В идеале в таблице не должно быть пустых ячеек. Либо у вас есть таблица данных, и в этой конкретной ячейке нет данных (которую вы должны указать с помощью «-», «н / д /» или чего-то в равной степени подходящего, либо - если необходимо - & nbsp ;, как предлагается ), или у вас есть ячейка, которая должна охватывать столбец или строку, или вы пытаетесь добиться некоторого макета с таблицей, для которой вы должны использовать CSS.
Можно поподробнее?
Мне это нравится. Повышается четкость.
Если у вас очень большая таблица (десятки тысяч ячеек или больше) с большим количеством ячеек без содержимого (75-95%), может быть более производительно иметь пустые ячейки.
Если вы установите для свойства border-collapse значение collapse, IE7 будет показывать пустые ячейки. Он также сворачивает границы, так что это может быть не на 100% то, что вы хотите.
td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<html> <head> <title>Border-collapse Test</title> <style type = "text/css"> td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}<table>
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td />
</tr>
</table>Я не уверен, что это должен быть принятый ответ, поскольку, как указано на плакате, у него есть другие побочные эффекты, которые вполне могут быть нежелательными. Это тоже неправда, по крайней мере, насколько я могу проверить. Можете выложить ссылку на рабочий пример?
Я добавил пример HTML-документа, в котором границы отображаются даже на пустых ячейках. Протестировано в IE7, fx3 и последней версии Safari. Основным побочным эффектом краевого коллапса является то, что у вас не может быть двойных границ, которые выглядят достойно. Кроме того, отсутствующие ячейки нельзя стилизовать, как бы вы ни старались.
граница-коллапс: коллапс; отлично работал у меня (проверено в IE7), спасибо :)
«IE» больше не является полезным термином в этом контексте, теперь, когда IE8 отсутствует.
IE7 всегда делает "empty-cells: show" (по крайней мере, мне так сказали ... Vista). IE8 в любом из своих режимов «Причуд» или «Стандарты IE7» всегда выполняет команду «empty-cells: hide». IE8 в режиме «Стандарт» по умолчанию имеет значение «empty-cells: show» и поддерживает атрибут через CSS.
Насколько мне известно, все остальные браузеры правильно поддерживают это в течение нескольких лет (я знаю, что это было добавлено в Firefox 2).
Другой способ убедиться, что во всех ячейках есть данные:
$(document).ready(function() {
$("td:empty").html(" ");
});
Это хорошо работает, так как вы можете поместить его в отдельный файл "ie.js" для включения через условные комментарии. В моем случае я не хотел менять свой бэкэнд из-за ошибки отображения IE.
Спасибо, вы сразу сохранили мне пару сотен условных операторов :)
Потрясающие!!! Вы только что сэкономили мне МНОГО работы !!! Хотел бы я дать больше, чем просто положительный голос !!!
для меня это похоже на взлом
Я беру это с другого сайта, но:
.sampletable {
border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
Используйте для CSS для таблицы и элемента TD соответственно.
Только пустая ячейка исправила Firefox (ДА, у меня действительно была эта проблема в Firefox) IE 7 и 8 все еще были проблематичными ..
Это сработало для меня как в Firefox 3.6.x, так и в IE 7 и 8, Chrome и Safari:
==============================
table {
*border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
==============================
Пришлось использовать *, чтобы убедиться, что стиль таблицы был применен только к браузеру IE.
Использование css-хаков может иметь неожиданные последствия, так что будьте осторожны. Другой способ - использовать условный CSS.
Вопрос задан для решения CSS, но, если не исключено, что решение HTML подойдет, вот одно из них:
Попробуйте добавить эти два атрибута в элемент таблицы: frame = "box" rules = "все" так:
<table border = "1" cellspacing = "0" frame = "box" rules = "all">
Хм. не работает, если пустые ячейки пусты, потому что они не существуют ... (например, указание tr с 10 ячейками td, но другие trs имеют ячейки 100 или 1000 td)
Комментарий от 2018 года здесь ... эти элементы теперь считаются устаревшими.
Это старый вопрос, но он по-прежнему занимает первое место в Google, поэтому я добавлю то, что нашел:
Простое добавление border-collapse: collapse в стиль таблицы устранило эту проблему для меня в IE7 (и не повлияло на то, как они отображаются в FF, Chrome и т. д.).
Лучше избегать постороннего кода, добавляющего или другой элемент интервала, когда вы можете исправить это с помощью CSS.
Я столкнулся с этим вопросом и не видел ответов, которые действительно касались бы проблемы.
Проблема возникает из-за того, что IE7 не видит внутреннего содержимого ячейки; с точки зрения программирования ячейка получается как null, и, как и большинство других вещей, вы не можете граничить с null или выполнять с ней какие-либо действия. Браузеру нужен элемент / объект с макетом, чтобы применить границу / макет.
Даже пустой <div></div> или <span></span> не содержат содержимого, поэтому рендерить нечего, что снова приводит к тому же случаю null.
Однако вы можете обмануть браузер, заставив его думать, что в ячейке есть содержимое, указав пустые свойства макета div/span. Самый простой способ - применить стиль CSS zoom:1.
<table>
<tr><td>Foo</td>
<td><span style = "zoom:1;"></span></td></tr>
</table>
Этот обходной путь лучше, чем использование , поскольку он не портит программы чтения с экрана без необходимости и не искажает значение ячейки. В более новом браузере вы можете использовать альтернативу empty-cell:<show|hide>.
Примечание: вместо комментария Томалака следует понимать, что hasLayout не имеет ничего общего с null, это было просто сравнение того, как браузер взаимодействует и отображает hasLayout аналогично тому, как база данных или язык программирования взаимодействуют с нулями. Это сложная задача, но я подумал, что тем программистам, которые превратились в веб-дизайнеров, может быть легче понять.
+1 Интересно. Хотя я не совсем уверен в вашей аналогии с null.
@Tomalak: Это было самое близкое сравнение с hasLayout, которое я мог провести. Если у элементов / объектов нет макета, тогда браузер (IE) обрабатывает их по-разному и не применяет к ним и их родительским объектам много визуальных настроек при рендеринге. Хотя это не синоним, я использовал это сравнение вольно, потому что Stack Overflow концептуально был форумом для программирования вопросов и ответов, не обязательно для отладки веб-дизайна - с тех пор он вырос :) у вас есть полное право не быть убежденным!
я протестировал {border-bottom: 1px сплошной красный; zoom: 1;} в IE7, и это не помогает. нижняя граница не отображается ....
@nerdess: вам нужно будет задать вопрос и показать ваш конкретный случай. У вас могут быть другие вещи, поскольку браузеры по-разному отрисовывают CSS; например, если вы устанавливаете одно и то же свойство дважды (например, color:blue;color:red;), некоторые используют настройку первого чтения (blue), другие - последнюю настройку (red). Это независимо от пограничных проблем, на которые может повлиять border-collapse и многое другое. Из-за всех этих особенностей слишком сложно определить, что может происходить в вашем случае.
Попробуйте это, если вы не можете использовать неразрывное пространство:
var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);
Я создаю стиль div, который имеет тот же цвет шрифта, что и фон вашей ячейки, и пишу что угодно (обычно "-", "н / д" или "пустой"), чтобы передать содержимое ячейки. Он появляется, если вы выделяете страницу, но при просмотре обычно выглядит так, как вы хотите.
Как это улучшает / добавляет к 13 другим ответам?
Я использую смесь html и css для создания кроссбраузерных сеток таблиц:
html
<table cellspacing = "1" style = "background-color:#000;" border = "0">
css
td{background-color:#fff;}
Пока я не видел проблем ни с одним браузером.
У меня проблема в IE6! & nbsp; так далеко :(