Почему граница <tr>не отображается в IE? - PullRequest
4 голосов
/ 14 мая 2010

Почему в IE не отображается граница tfoot tr:first-child. Я проверяю в IE7.

font-weight:bold; background:yellow отображается в IE, но граница не

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table tfoot tr:first-child {
    font-weight:bold;
    background:yellow;
    border-top:2px solid red; 
    border-bottom:2px solid red;
}

HTML

<table cellpadding="0" cellspacing="0">
 <thead>
  <tr>
   <th align="left" scope="col">XXXX</th>
   <th align="right" scope="col">XXXX</th>
   <th align="right" scope="col">XXXX</th>
   <th align="right" scope="col">XXXX</th>
  </tr>
 </thead>
  <tfoot>
  <tr>
   <td colspan="3">XXXX</td>
   <td align="right">XXX</td>
  </tr>
   <tr>
   <td colspan="4">XXX</td>
   </tr>
 </tfoot>
 <tbody>
  <tr>
   <td align="left">XXXX</td>
   <td align="right">XXXX</td>
   <td align="right">XXXX</td>
   <td align="right">XXXX</td>
  </tr>
 </tbody>
</table>

Обновление:

Я использую этот тип документа

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

Ответы [ 3 ]

5 голосов
/ 14 мая 2010

Я бы не стал стилизовать элементы tr, потому что они действительно "не существуют" как таковые, за исключением семантических причин. Вам лучше ориентироваться на сами ячейки таблицы, используя что-то вроде этого:

table tfoot tr:first-child th,
table tfoot tr:first-child td {
    font-weight:bold;
    background:yellow;
    border-top:2px solid red; 
    border-bottom:2px solid red;
}

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

table > tfoot > tr:first-child > th,
table > tfoot > tr:first-child > td {
    ...
}
4 голосов
/ 14 мая 2010

http://www.w3schools.com/css/pr_pseudo_first-child.asp

Примечание: Для: first-child для работы в IE необходимо объявить DOCTYPE

Добавить что-то вроде:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

И это должно работать

0 голосов
/ 26 февраля 2014

Укажите позицию относительно класса tr, который будет исправлен.

tfoot tr {position: относительный; граница снизу: сплошная 1px #ccc; }

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