Những điều kỳ lạ với biên lợi nhuận trên bàn

Question

Câu hỏi không phải là rất ngắn, nhưng thật dễ hiểu.

Đây là jsFiddle

Tôi có hai bảng lồng nhau, như thế:

Dưới đây là đánh dấu:

<table class="outer"> 
    <tr> 
    <td></td> 
    <td> 
     <table class="inner"> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     </table> 
    </td> 
    <td></td> 
    </tr> 
</table> 

<style> 
table, tr, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 

table { 
    width: 100%; 
} 

.outer { 
    height: 100px; 
} 

.inner { 
    background-color: #ccc; 
    height: 50px; 
} 
</style> 

Điều kỳ lạ 1st

Sau đó, tôi muốn thêm một hor tiêu cực lề izontal vào bảng bên:

.inner { 
    margin: 0 -10%; 
} 

Sản lượng dự kiến ​​là một cái gì đó như thế này:

Nhưng thay vào đó, tôi có được điều này:

Vấn đề có thể được giải quyết bằng cách đặt bảng bên trong trong div:

<!-- outer table --> 
    <div class="wrapper"> 
    <table class="inner-wrapped"> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
    </table> 
    </div> 
<!-- outer table --> 

<style> 
.wrapper { 
    margin: 0 -10%; 
} 

.inner-wrapped { 
    background-color: rgb(0,200,0); 
    height: 50px; 
} 
</style> 

Điều kỳ lạ thứ 2

Nếu tôi đặt tiêu cực -10px lề horizonal (trước đây chúng tôi sử dụng phần trăm, không pixel), sau đó trong thêm bảng mà di chuyển chỉ sang bên trái (như trong trường hợp đầu tiên), nó sigifically giảm trong chiều rộng:

.inner { 
    margin: 0 -10px; 
} 

những câu hỏi

• Tại sao cả hai điều này xảy ra?

• Cách để giải quyết vấn đề là gì? Nó là một thực hành tốt để chỉ đơn giản là sử dụng một wrapper, như tôi, hoặc tôi nên sử dụng một cách khác, thông minh hơn?

Answer 1

Nếu bảng chính là width:100%; nó sẽ mở rộng tất cả các cách và bảng bên trong sẽ lấy 100% ban đầu để tham khảo. margin âm sẽ không mở rộng nó miễn là không có nội dung nào tạo ra nó. nó sẽ làm việc nếu: https://jsfiddle.net/md2tx2d4/2/

.inner { margin:0 -10%; width:120%;} 

hoặc nếu bạn để nó sống mà không chiều rộng và để cho nó phát triển từ nội dung của nó

table { } 
td {width:200px;/* instead real content missing here */} 

https://jsfiddle.net/md2tx2d4/1/