Блог

Главная - Вопросы по программированию - 100% ширина дочернего подразделения внутри родительского подразделения не отображается

100% ширина дочернего подразделения внутри родительского подразделения не отображается

#html #css #scroll #overflow #parent-child

#HTML #css #прокрутка #переполнение #родитель-потомок

Вопрос:

Как показать 100% ширину дочернего подразделения внутри родительского подразделения, если я использую прокрутку для родительского подразделения.

Ниже приведена картинка, посмотрите на эту картинку для идеи. Как показано на втором рисунке, я хочу что-то подобное.

Посмотрите на эту картинку для идеи http://www.fzkforum.com/CHILD-ISSUE.JPG

Ниже приведен мой html-код.

 <!--/*main div starts*/-->
<div style="width:480px; margin:auto; border:solid 2px; padding:10px;">

<!--/*parent div starts*/-->
<div style="overflow:scroll; height:300px; padding:10px; " >

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>
<td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>
<td>htrh</td>     
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>
<td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>

<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>      <td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>
<td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>
link
</td>
</tr>
</table>

<!--/*child div starts*/-->
<div style=" border: solid 1px #ccc;">i want this  div 100% is it possible?  </div>

<!--/*child div ends*/-->
</div>
<!--/*parent div ends*/-->

</div>
<!--/*main div ends*/-->
enter code here

заранее спасибо

Ответ №1:

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

  <div style="width:480px; margin:auto; border:solid 2px; padding:10px;">

 <!--/*parent div starts*/-->
 <div style="overflow:scroll; height:300px; padding:10px; " >
 <div style="display:table">
 <div style="table-row">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">

  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>

  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>
   link
  </td>
 </tr>
 </table>
 </div>
 <!--/*child div starts*/-->
 <div style="display:table-row">
 <div style=" border: solid 1px #ccc; display:table-cell;">i want this  div 100% is it possible?  </div>
  </div>
  </div>
 <!--/*child div ends*/-->
 </div>
 <!--/*parent div ends*/-->

 </div>

Есть скрипка

Ответ №2:

Создайте класс для дочернего div и сделайте его шириной 480 пикселей;

  .child{
  width:480px;
}