Таблица не помещается в родительский DIV

Question

Вот пример того, что я пытаюсь сделать (поместить таблицу в DIV и сделать его заполнить дел): ex1_jsfiddle

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    height: 100%; 
 
    table-layout: fixed; 
 
} 
 
td, 
 
th { 
 
    border: 1px solid; 
 
    text-align: left; 
 
    padding: 0px 55px 0px 55px; 
 
} 
 
tr:nth-child(even) { 
 
    background-color: lightgreen; 
 
} 
 
tr { 
 
    margin-top: 0; 
 
} 
 
aside { 
 
    background-color: lightblue; 
 
    border: solid 2px; 
 
    position: absolute; 
 
    float: left; 
 
    height: 100%; 
 
    width: 15%; 
 
} 
 
#table_div { 
 
    float: left; 
 
    border: solid 2px; 
 
    margin-left: 25%; 
 
    height: 300px; 
 
    width: 700px; 
 
    border-color: red; 
 
}

<aside>sidebar</aside> 
 
<div id="table_div"> 
 
    <table> 
 
    
 
    <tr> 
 
     
 
     <th>Firstname</th> 
 
     
 
     <th>Lastname</th> 
 
     
 
     <th>Age</th> 
 
     </tr> 
 
    <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Eve</td> 
 
     <td>Jackson</td> 
 
     <td>94</td> 
 
    </tr> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>80</td> 
 
    </tr> 
 
    </table> 
 
</div>

Проблема заключается в том, что, как вы видите в ex1, таблица выходит из родительского div. И самое странное, что если я отступа элементов между <div_id="table_div> и </div> с 1 таб, он работает, НО ТОЛЬКО в jsfiddle: ex2_jsfiddle

Когда я пытаюсь его в браузере (Chrome) не работает.

Итак, может кто-нибудь объяснить мне, что происходит?

Answer 1

Проблема в том, что у вас есть   персонажей. Они кажутся безвредными пространствами, но на самом деле это non-breaking spaces ( ), который HTML не учитывает space characters.

<div>IT WORKS!</div> 

<aside>sidebar</aside> 
<div id="table_div"> 
<table > 
&nbsp; <tr> 
&nbsp;&nbsp;&nbsp; <th>Firstname</th> 
&nbsp;&nbsp;&nbsp; <th>Lastname</th> 
&nbsp;&nbsp;&nbsp; <th>Age</th> 
&nbsp; </tr> 
    <tr> 
    <td >Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
    </tr> 
    <tr> 
    <td>John</td> 
    <td>Doe</td> 
    <td>80</td> 
    </tr> 
</table> 
</div> 

These   не пускают, так что синтаксический анализатор перемещает их перед таблицей. Это создает пустую строку.

Answer 2

Похоже, что в версии JSfiddle версия без табуляции (ex1_jsfiddle) регистрирует символ между <div> и <table> и, следовательно, нажатие на стол вниз.

Я пробовал его в хроме, и это точно похоже на комментарий @ zer00ne. Но когда я помещаю пустой символ, например. &nbsp, это выглядит как ваш ex1_jsfiddle

Answer 3

Здесь решение! измените «#talbd_div» ширина в%

#table_div { 
    float: left; 
    border: solid 2px; 
    padding-left: 15%; 
    height: 300px; 
    width: 80%; 
    border-color: red; 
}