Css применять запас в таблицу внутри DIV

Question

У меня есть ситуация, подобная той, представленной в this fiddle, где есть таблица с

table { 
    width: 100%; 
    margin-right: 30px; 
}. 

внутри div.

Проблема в том, что, применяя маржу к таблице, она выходит из родительского div. Как я могу избежать этого?

Answer 1

Добавить padding-right на DIV вместо:

div { 
    padding-right: 30px; 
} 
table { 
    width: 100%; 
} 

Answer 2

Ширина относится к фактическому содержанию элемента, так что у вас есть таблица с 100% широким содержанием, и слева что вы добавляете некоторые поля, нажимая ширину более 100%, поэтому правая часть таблицы выходит за пределы правого края родителя. Вероятно, вы должны пойти с дополнением к родительскому, а не по краю на столе, или дополнительной оберткой с разницей.

table { 
 
    width: 100%; 
 
    border:1px solid green; 
 
    border-collapse: collapse; 
 
} 
 
.inner{ 
 
    margin-left:100px; 
 
}

<div> 
 
    <div class="inner"> 
 
    <table border="1"> 
 
     <thead> 
 
      <tr> 
 
       <th>HEADER 1</th> 
 
       <th>HEADER 2</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>11</td> 
 
       <td>12</td> 
 
      </tr> 
 
      <tr> 
 
       <td>21</td> 
 
       <td>22</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
     </div> 
 
</div>