2013-11-20 5 views
0

Может кто-нибудь объяснить, почему div с красной рамкой не расширен?Таблица внутри элемента блока. Какие правила применяются

<body style="padding:200px"> 
     <div style="border:1px solid red"> 
      <table> 
       <tr> 
        <input type="text" style="width:1600px"/> 
       </tr>   
      </table> 
     </div> 
<body> 

Я не хочу другого решения, я хочу узнать, какие правила калибровки CSS-кода применяются браузером.

ответ

2

div с красной рамкой делает развернуть, однако его ширина ограничена body. Поскольку он не имеет указанной ширины шире, чем тело, он не переполняет его.

input с другой стороны имеет указанную ширину шире, чем корпус, поэтому переполнения.

<body style="padding:200px"> 
     <div style="border:1px solid red"> 
      <table> 
       <tr> 
        <td> 
         <input type="text" style="width:1600px"/> 
        </td> 
       </tr>   
      </table> 
     </div> 
<body> 

http://jsfiddle.net/mz8N8/1/

+0

Спасибо за ваш ответ ... Его мой первый вопрос о Stackoverflow, но я читал +100000 ответы 10 лет. Основная проблема заключается в том, что a имеет элемент Fieldset (элемент блока) в теле и внутри набора полей. У меня есть ширина сетки таблицы 20, и больше столбцов и ячейки имеют одно и только одно текстовое поле. – user3015362

+0

Спасибо за ваш ответ ... Его мой первый вопрос о Stackoverflow, но я прочитал 100000 ответов через 10 лет. Основная проблема заключается в том, что a имеет элемент Fieldset (блок elemt) в теле и внутри набора полей. У меня ширина сетки таблицы 20 и больше столбцов, а ячейка имеет одно и только одно текстовое поле. Ширина стола растет за пределами поля, и набор полей (потому что он имеет цвет bacground) кажется поврежденным. Я попытался взломать полевой набор - как сделать отображение: встроенный, чтобы развернуть и включить всю таблицу, НО я хочу, чтобы ширина решения отсутствовала или перекрывала браузеры. Правила по умолчанию css – user3015362

+0

Пожалуйста, разместите соответствующий код (в своем вопросе) и используйте [jsfiddle] (http://jsfiddle.net), чтобы показать результат. –

Смежные вопросы