Как я могу заставить TD без содержимого отображать его границу?

StackOverflow https://stackoverflow.com/questions/602285

Вопрос

В TD есть DIV, внутри которого я удалил с помощью функции fadeOut от jQuery, но когда она завершается, граница тоже исчезает.

Я хочу избежать этого, есть ли какой-нибудь другой способ, кроме добавления "" (что делает его уродливым)?

Редактировать:Я использую Internet Explorer (6 и 7)

Это было полезно?

Решение

CSS:

table {
  empty-cells: show;
}

Вам также необходимо перевести IE в стандартный режим рендеринга, чтобы это сработало.После добавления doctype, по крайней мере, IE8 (бета-версия 2 и выше) работает нормально.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">

IE7 и ниже по-прежнему этого не сделают.Поддержка для empty-cells считается "частичным" (для IE7 и IE8 Beta 1) на заявление о совместимости MS CSS.Что бы ни означало "частичная", отсутствие реализации "show" вряд ли можно назвать "частичной поддержкой".Эти браузеры могут быть вынуждены рисовать границы ячеек, обычно сворачивая границы таблицы:

table {
  border-collapse: collapse;   
}

Установка empty-cells игнорируется.Но как только вы свернете границы, вам все равно не нужно это устанавливать, потому что все браузеры будут отображать свернутые границы.

Другие советы

1pt"> <td>

Добавьте неразрывный пробел в ячейку:

<td>&nbsp;</td>

Взлом, но лучший взлом, чем добавление изображения.

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

Итак, если у вас есть таблица, подобная приведенной ниже:

<table border="1">
<tr>
 <td>Breakfast</td>
 <td><div id="foo">Lunch</div></td>
 <td>Dinner</td></tr>
</table>

И вы fadeOut с помощью jQuery, Lunch, почему бы не вернуть пустое ничто с помощью fadeIn?

Как показано ниже:

$("#foo").fadeOut("slow").html('').fadeIn("fast");

В зависимости от того, чего именно вы пытаетесь достичь, вы могли бы установить visibility-свойство div для hidden вместо того, чтобы устанавливать его display-собственность на none, т. е. вам пришлось бы восстанавливать display и opacity и установить visibility вручную после вызова fadeOut().

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top