CSS, чтобы сделать границы пустой ячейки? - PullRequest
Новая
       28

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

72 голосов
/ 11 сентября 2008

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

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

Ответы [ 15 ]

58 голосов
/ 11 сентября 2008

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

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

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

44 голосов
/ 29 июля 2009

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

   $(document).ready(function() {
      $("td:empty").html(" ");
    });
31 голосов
/ 11 сентября 2008

Если установить для свойства 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>
24 голосов
/ 02 марта 2011

Вопрос, заданный для решения CSS, но на случай, если решение HTML подойдет, вот один:

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

<table border="1" cellspacing="0" frame="box" rules="all">
9 голосов
/ 27 мая 2011

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

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

Этот обходной путь лучше, чем использование &nbsp;, поскольку он не излишне портит программы чтения с экрана и не искажает значение ячейки. В более новом браузере вы можете использовать альтернативу empty-cell:<show|hide>.

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

9 голосов
/ 11 сентября 2008

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

empty-cells: show
5 голосов
/ 07 апреля 2011

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

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

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

5 голосов
/ 11 сентября 2008

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

Можем ли мы иметь немного больше деталей?

2 голосов
/ 11 сентября 2008

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

1 голос
/ 09 апреля 2013

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

HTML

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

1008 * CSS * 

td{background-color:#fff;}

Пока что я не видел проблем ни с одним браузером.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...