Скроллинг таблицы внутри дива

seenter · June 14, 2011

Проблема такая:

есть таблица, у каждой колонки явно (в теге TD) указана ширина, общая ширина таблицы допустим 800px

теперь оборачиваю ее в div с явно указанной шириной 600px и таблица пытается схлопнуться, т.е. колонки уже не реагируют на указанную явно ширину, а приобретают как можно меньшую ширину

Вопрос:

каким образом сделать так чтобы ширины колонок таблицы сохранились в еньшем по ширине div-е? (т.е. шоб таблица сохранила свои размеры, а в диве появился скролинг)

css дива по id:

#d {overflow: auto;

width: 600px;}

Great Rash · June 14, 2011

Ссылку на сайт в студию.

seenter · June 14, 2011

вот пример:

 
<head>
 <style>
 #d {border: 4px double black;
 width: 250px;
 height: 50px;
 overflow: auto;}
 </style>
 </head>
 <html>
 <div id="d">
 блок
 <table border="1px" >
 <tr>
 <td width="100px">проверка</td><td width="100px">проверка</td><td width="100px">проверка</td>
 </tr>
 <tr>
 <td width="100px">проверка</td><td width="100px">проверка</td><td width="100px">проверка</td>
 </tr>
 <tr>
 <td width="100px">проверка</td><td width="100px">проверка</td><td width="100px">проверка</td>
 </tr>
 </table>
 </div>


</html>

реальная ширина колонок таблицы получается уменьшается (не равна 100px)

как сделать чтобы сохранилась?

Edited June 14, 2011 by seenter

buddah · June 14, 2011

<table border="1px", width="600px" >

подобрать ширину таблицы?

Вот появился горизонтальный скролл: http://jsfiddle.net/9wrM9/

Так надо было?

Edited June 14, 2011 by buddah

seenter · June 14, 2011

<table border="1px", width="600px" >
подобрать ширину таблицы?
Вот появился горизонтальный скролл: http://jsfiddle.net/9wrM9/
Так надо было?

в общем да, но желательно не указывая явно ширину для таблицы

Sign In

Скроллинг таблицы внутри дива

Question

seenter

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

seenter

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

seenter

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information