एक ही पंक्ति पर एकाधिक टेबल

Question

मेरे पास तीन टेबल हैं जो सभी एक div में निहित हैं। मैं उन्हें div में इनलाइन सभी शो में लाने की कोशिश कर रहा हूं, लेकिन वे प्रत्येक अपनी लाइन पर दिखाते हैं। मैंने उन्हें सभी को प्रदर्शित करने के लिए सेट किया: तालिका स्तर पर इनलाइन, लेकिन यह चाल नहीं किया। एक ही पंक्ति पर दिखाने के लिए एकाधिक टेबल कैसे प्राप्त करें के बारे में कोई विचार?

<div id="container"> 
    <table id="previous-arrow" class="scroll"> 
    <tr> 
     <td><a href="#" id="nav-prev"><span>Previous</span></a></td> 
    </tr> 
    </table> 
    <table id="tour-carousel"> 
    <tr id="carousel-row"> 
     <td>data here</td> 
    </tr> 
    </table> 
    <table id="next-arrow" class="scroll"> 
    <tr> 
     <td><a href="#" id="nav-next"><span>Next</span></a></td> 
    </tr> 
    </table> 
</div> 

Answer 1

उन्हें सीएसएस में छोड़े जाने की कोशिश करें।

table { 
float:left; 
} 

और सुनिश्चित करें कि उनमें से चौड़ाई एक तरफ कंटेनर से अधिक नहीं है।

Answer 2

आप उन्हें तैर सकते हैं:

एचटीएमएल

<div class="container"> 
    <table><tr><td>Table 1</td></tr></table> 
    <table><tr><td>Table 2</td></tr></table> 
    <table><tr><td>Table 3</td></tr></table> 
</div> 

सीएसएस

table { 
    float:left; 
    width:33%; 
} 

फिडल: http://jsfiddle.net/kboucher/6HuyW/

Answer 3

आप उन्हें इनलाइन प्रदर्शित करना चाहते हैं, लेकिन अभी भी तालिकाओं के रूप में (अन्यथा उनकी सामग्री अज्ञात तालिका ब्लॉक बनाएगी जो रैपिंग का कारण बनती हैं)।

display: inline-table; 

Answer 4

उपयोग कोड नीचे

<div id="container"> 
    <table id="previous-arrow" class="scroll" **style="float:left"**> 
<tr> 
    <td><a href="#" id="nav-prev"><span>Previous</span></a></td> 
</tr> 
</table> 
<table id="tour-carousel" **style="float:left"**> 
<tr id="carousel-row"> 
    <td>data here</td> 
</tr> 
</table> 
<table id="next-arrow" class="scroll" **style="float:left"**> 
<tr> 
    <td><a href="#" id="nav-next"><span>Next</span></a></td> 
</tr> 
</table> 
</div>