Границы tbody td не прокручиваются с содержимым в переполнении tbody: auto; - PullRequest
Новая
       1

Границы tbody td не прокручиваются с содержимым в переполнении tbody: auto;

0 голосов
/ 18 мая 2010

Я не могу заставить границы этих тд следовать их строкам, когда я прокручиваю это переполнение: auto; <tbody>. Любые идеи по исправлению?

Примечание: настройка макет таблицы: фиксированная или создание строк отображение: блок не вариант, так как строки потеряют свою текучесть ..

Вы можете увидеть проблему в последнем Firefox, , так что я предполагаю, что она запуталась в другом месте.

Вот тест, который я настроил (прокрутите вниз для демонстрации): http://www.webdevout.net/test?01y

HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <table>
     <thead><th>One</th><th>Two</th><th>Three</th></thead>
     <tbody>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
     </tbody>
    </table>
  </body>
</html>

CSS: 

table {width:100%;border-collapse:collapse;}
tbody {height:200px;overflow:auto;}
td {border-bottom:1px solid #f00;}

Ответы [ 2 ]

2 голосов
/ 18 мая 2010

Также не работает в IE. Это хорошо подводит итог: «свойство переполнения, как определено в спецификации CSS 2.1, раздел 11.1.1, не применяется к объектам таблицы-строки-группы».

Здесь есть несколько обходных путей, как подробно описано в этом недавнем вопросе о SO . Ссылка из OP имеет два интересных решения, первое из которых может работать для вас, если вы не можете изменить вывод. Это в основном включает в себя обертывание таблицы в два элемента div, установку внутреннего div для переполнения: auto и абсолютное позиционирование thead относительно внешнего div, чтобы он извлекался из внутреннего контейнера.

0 голосов
/ 18 мая 2010

Не уверен, почему в FF происходит странное поведение, но решение состоит в том, чтобы создать две таблицы и поместить вторую внутри div.

HTML: 

<table>
 <thead>
  <th>One</th><th>Two</th><th>Three</th>
 </thead>
</table>
<div>
 <table>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
 </table>
</div>

CSS: 

table {width:100%;border-collapse:collapse;}
div {height:200px;overflow:auto;}
th {width:33%;}
td {border-bottom:1px solid #f00;width:33%;}

Я добавил определенную ширину к ths и tds, чтобы обеспечить выравнивание столбцов, так как они находятся в разных таблицах, но вам, возможно, не придется указывать.

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

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

...