CSS, чтобы создать пустую границу ячейки?

Какой CSS следует использовать для создания границы ячейки, даже если ячейка пуста?

IE 7 специально.

Ответ 1

Если я помню, ячейка не существует в каком-то IE, если она не заполнена чем-то...

Если вы можете поместить   (неразрывное пространство), чтобы заполнить пустоту, это обычно работает. Или вам требуется чистое решение CSS?

По-видимому, IE8 показывает ячейки по умолчанию, и вам нужно скрыть его с помощью empty-cells:hide Но это совсем не работает в IE7 (который скрывает по умолчанию).

Ответ 2

Другой способ убедиться, что во всех ячейках есть данные:

   $(document).ready(function() {
      $("td:empty").html("&nbsp;");
    });

Ответ 3

Если вы установите для свойства 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>

Ответ 4

Вопрос задан для решения CSS, но, вне зависимости от того, что сделает HTML-решение, вот один из них:

Попробуйте добавить эти два атрибута к элементу таблицы: frame = "box" rules = "all" например:

<table border="1" cellspacing="0" frame="box" rules="all">

Ответ 5

Я только что нашел следующее. Он соответствует стандартам, но он не работает в IE. Вздох.

empty-cells: show

Ответ 6

Я столкнулся с этим вопросом и не видел ответов, которые действительно затрагивали проблему.

Проблема возникает из-за того, что 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>.

Примечание: вместо комментария Tomalak, следует понимать, что hasLayout не имеет ничего общего с null, это просто сравнение того, как браузер взаимодействует и отображает hasLayout аналогично тому, как база данных или язык программирования взаимодействует с нулями. Это strech, но я подумал, что было бы легче понять, для тех программистов, которые стали веб-дизайнерами.

Ответ 7

В идеале у вас не должно быть пустых ячеек в таблице. Либо у вас есть таблица данных, либо нет данных в этой конкретной ячейке (которую вы должны указывать с помощью "-" или "n/a/", или что-то в равной степени, или - если вам нужно - & nbsp; как было предложено), или у вас есть ячейка, которая должна охватывать колонку или строку, или вы пытаетесь достичь макета с таблицей, для которой вы должны использовать CSS.

Можем ли мы немного подробнее?

Ответ 8

Этот вопрос старый, но все же лучший результат в Google, поэтому я добавлю то, что нашел:

Просто добавив border-collapse: collapse в стиль таблицы, эта проблема была исправлена для меня в IE7 (и не повлияла на то, как они отображаются в FF, Chrome и т.д.).

Лучше избегать постороннего кода добавления элемента   или другого интервала, когда вы можете исправить с помощью CSS.

Ответ 9

Я думаю, это не может быть сделано с помощью CSS; Вам нужно поставить & nbsp; в каждой пустой ячейке для отображения границы в IE...

Ответ 10

пустая ячейка только фиксированная Firefox (ДА У меня действительно была эта проблема в Firefox) IE 7 и 8 все еще были проблематичными..

Это работало для меня как в Firefox 3.6.x, IE 7 и 8, Chrome и Safari:

==============================

table {
*border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

==============================

Пришлось использовать *, чтобы убедиться, что стиль таблицы применяется только к браузеру IE.

Ответ 11

Попробуйте это, если вы не можете использовать неразрывное пространство:

var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);

Ответ 12

Я создаю стиль div, который имеет тот же цвет шрифта, что и фон вашей ячейки, и пишу что-нибудь (обычно "-" "n/a" или "empty" ), чтобы предоставить содержимое ячейки. Он отображается, если вы выделяете страницу, но при просмотре обычно выглядит так, как вы хотите.

Ответ 13

Я использую сочетание html и css для создания сетки таблицы кросс-браузера:

HTML

<table cellspacing="1" style="background-color:#000;" border="0">

CSS

td{background-color:#fff;}

Я пока не видел проблем с обоими браузерами.

Ответ 14

"IE" теперь не является полезным термином в этом контексте, поскольку IE8 отсутствует.

IE7 всегда делает "empty-cells: show" (или так мне говорят... Vista). IE8 в любом из своих режимов "Quirks" или "IE7 Standards" всегда выполняет "empty-cells: hide". IE8 в режиме "Стандарты" по умолчанию "empty-cells: show" и поддерживает атрибут через CSS.

Насколько я знаю, каждый другой браузер правильно поддерживал это в течение нескольких лет (я знаю, что он был добавлен в Firefox 2).

Ответ 15

Я беру это с другого сайта, но:

.sampletable {
border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

Используйте для CSS для таблицы и элемента TD соответственно.