टेबल पर नकारात्मक मार्जिन के साथ अजीब चीजें

Question

प्रश्न बहुत छोटा नहीं है, लेकिन समझना आसान है।

यहाँ jsFiddle

है मुझे लगता है कि जैसे दो नेस्टेड तालिकाओं है,:

<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> 

1 अजीब बात

:

यहाँ मार्कअप है फिर, मैं एक नकारात्मक घोड़ा जोड़ना चाहता हूँ भीतरी मेज पर izontal मार्जिन:

.inner { 
    margin: 0 -10%; 
} 

उम्मीद उत्पादन कुछ इस तरह है:

लेकिन बजाय, मैं इस मिल:

समस्या हो सकती है 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> 

2 अजीब बात

मैं नकारात्मक horizonal मार्जिन -10px सेट करते हैं (पहले हम percents, नहीं पिक्सेल का उपयोग), तो अतिरिक्त में उस तालिका केवल बाईं ओर (जैसे पहले मामले में) ले जाता है, यह sigifically चौड़ाई में कम कर देता है:

.inner { 
    margin: 0 -10px; 
} 

सवाल

• यह दोनों चीजें क्यों होती हैं?

• इसे हल करने का कोई तरीका क्या है? क्या यह केवल एक रैपर का उपयोग करने के लिए एक अच्छा अभ्यास है, जैसा कि मैं करता हूं, या मुझे एक और अधिक चालाक तरीका का उपयोग करना चाहिए?

Answer 1

तो मुख्य तालिका है width:100%; यह सभी तरह का विस्तार होगा और मन की तालिका में संदर्भ के लिए प्रारंभिक 100% ले जाएगा। ऋणात्मक मार्जिन तब तक विस्तार नहीं करेगा जब तक कि कोई सामग्री इसे न करे। यह काम करेगा अगर: https://jsfiddle.net/md2tx2d4/2/

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

या आप चौड़ाई के बिना जीना यह जाने और इसे अपनी सामग्री

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

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