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

Question

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

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

IE 7 в частности.

334 15

css

15 ответов:

Comments

Ничего не найдено.

Grant · Accepted Answer · 2015-04-20 16:46:22

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

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

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

Rasmus · Accepted Answer · 2011-05-29 23:39:18

еще один способ убедиться, есть данные во всех ячейках:
   $(document).ready(function() {
      $("td:empty").html("&nbsp;");
    });

rpetrich · Accepted Answer · 2014-12-30 19:32:27

если вы выберите 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>

renozu · Accepted Answer · 2011-03-03 21:19:13

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

попробуйте добавить эти два атрибута в элемент таблицы:frame=" box "rules= "all" вот так:
<table border="1" cellspacing="0" frame="box" rules="all">

Allain Lalonde · Accepted Answer · 2008-09-11 19:16:51

Я только что нашел следующее. Это соответствует стандартам, но он не работает в IE. вздох.
empty-cells: show 

vol7ron · Accepted Answer · 2011-05-27 23:25:11

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

проблема приводит к тому, что IE7 не видит никакого внутреннего содержимого для ячейки; в терминах программирования ячейка получается как null и, как и большинство вещей, вы не можете ограничивать a 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 аналогично тому, как база данных или язык программирования взаимодействует с нулями. Это стреч, но я думал, что это может быть легче понять для тех программистов, которые стали веб-дизайнерами.

Bobby Jack · Accepted Answer · 2008-09-11 19:18:15

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

можно немного поподробнее?

Voodoo · Accepted Answer · 2011-04-07 02:45:48

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

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

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

fijter · Accepted Answer · 2008-09-11 19:10:41

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

Crystal Jones · Accepted Answer · 2010-08-31 23:46:19

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

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

==============================
table {
*border-collapse: collapse;}

.sampleTD {
empty-cells: show;}
==============================

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

ruruskyi · Accepted Answer · 2011-07-20 17:57:33

попробуйте это, если вы не можете использовать неразрывный пробел:
var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);

Brett Haynes · Accepted Answer · 2012-03-07 16:10:54

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

JT... · Accepted Answer · 2013-04-09 07:20:00

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

html

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

css
td{background-color:#fff;}
Я не видел никаких проблем с любыми браузерами до сих пор.

score 0 · Accepted Answer · 2009-02-10 17:15:28

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

IE7 всегда делает "пустые ячейки: показать" (или так мне сказали ... Перспектива.) IE8 в любом из своих режимов "причуд" или "стандартов IE7" всегда делает "пустые ячейки:скрыть". IE8 в режиме" стандарты "по умолчанию имеет значение" пустые ячейки:показать " и поддерживает атрибут через CSS.

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

Sofox · Accepted Answer · 2010-03-30 19:24:20

Я взял это с другого сайта, но:
.sampletable {
border-collapse: collapse;}

.sampleTD {
empty-cells: show;}
использовать для CSS для таблицы и элемента TD соответственно.