HTML таблица должна переполниться - PullRequest
Новая
       5

HTML таблица должна переполниться

0 голосов
/ 29 марта 2011

У меня есть таблица с двумя столбцами. Первый (который содержит меню) должен иметь фиксированная ширина, в то время как вторая (содержащая некоторое содержимое страницы) может варьироваться по ширине. Таблица должна переполнять окно (что по умолчанию не выполняется), так как в противном случае браузер уменьшает ширину столбца меню, если содержимое очень широкое. Но я не могу определить фиксированную ширину для таблицы (вызывая ее переполнение), потому что я не знаю ширину содержимого. 

Overflow:scroll

не похоже на работу с таблицами. Буду благодарен за обходные пути / решения. 

<table class="rootTableContent">
<tr>
    <td id="rootTableMenu">             
    </td>
    <td id="rootTableContent">
    </td>
</tr>

Ответы [ 2 ]

1 голос
/ 29 марта 2011

Решением этой проблемы является использование правильного CSS (Divs / Spans и т. Д.) Для разметки вашего сайта, а не для таблиц.Я за использование таблиц для отображения табличных данных, и вы увидите, что я спорю за них в тех местах, где они действительны, но это не одна из них.

Это легко сделать с помощью чего-то подобного: 

<div style="float:left; width: 150px">
   Navigation Code Here
</div>
<div style="float: left">
   Other Content Here
</div>
<div style="clear:both"></div>

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

0 голосов
/ 29 марта 2011

Как уже говорили другие, пожалуйста, не используйте <table> макеты. Он старый, неуклюжий и сбивает с толку средства чтения с экрана и другие специальные программы.

Если вы абсолютно настаиваете на использовании вашего метода, вы можете попробовать это:

Демонстрация в реальном времени 

<style type="text/css">
div.wrap {
    overflow-y: auto;
    width: 75%;
}
div.wrap table {
    border: 1px solid #000;
    width: 100%;
}
div.wrap table td {  
    padding: 20px;
}
</style>

<div class="wrap">
  <table class="rootTableContent">
    <tr>
      <td id="rootTableMenu">rootTableMenu</td>
      <td id="rootTableContent">rootTableContent</td>
    </tr>
  </table>
</div>
...