मैं कई एचटीएमएल टेबलों को समान कॉलम चौड़ाई कैसे बना सकता हूं

Question

मेरे पास एकाधिक HTML टेबल हैं। प्रत्येक तालिका में कॉलम की एक ही संख्या होती है लेकिन प्रत्येक सेल में डेटा के विभिन्न सेट के साथ।

<table><tr> 
    <td>Col 1 Table 1</td> 
    <td>Col 2 Table 1</td> 
    <td>Col 3 Table 1</td> 
</tr></table> 

<table><tr> 
    <td>Col 1 Table 2</td> 
    <td>Col 2 Table 2</td> 
    <td>Col 3 Table 2</td> 
</tr></table> 

मैं इन तालिकाओं (इसलिए प्रत्येक प्रथम स्तंभ, प्रत्येक दूसरे स्तंभ, आदि) भर में प्रत्येक तुलनीय स्तंभ एक ही चौड़ाई तो सभी तालिकाओं का पूरी तरह से लाइन अप करने के लिए हो सकता है सबसे आसान तरीका है यह पता लगाने चाहता था।

कुछ विशिष्ट कारणों से, मैं इन्हें एक ही तालिका में विलय नहीं कर सकता, इसलिए मैं देखना चाहता हूं कि कई टेबल होने के लिए वैसे भी है या नहीं।

ऐसा लगता है कि सेल में मौजूद डेटा के आधार पर यह तालिकाएं (चाहे जो भी सीएसएस मैंने रखा है) को बदल दिया जा रहा है।

कोई सुझाव?

Answer 1

सबसे लचीलापन मैं अपनी 'ही वर्ग के साथ प्रत्येक स्तंभ प्रदान करेगा के लिए।

सीएसएस

.column-1 { 
    width: 100px; 
} 
.column-2 { 
    width: 300px; 
} 
.column-3 { 
    width: 225px; 
} 

एचटीएमएल

<table><tr> 
    <td class="column-1">Col 1 Table 1</td> 
    <td class="column-2">Col 2 Table 1</td> 
    <td class="column-3">Col 3 Table 1</td> 
</tr></table> 

<table><tr> 
    <td class="column-1">Col 1 Table 2</td> 
    <td class="column-2">Col 2 Table 2</td> 
    <td class="column-3">Col 3 Table 2</td> 
</tr></table> 

आप CSS3 का उपयोग कर आप भी इस जो एचटीएमएल आप की राशि में कटौती करेगा प्राप्त करने के लिए वें वाले बच्चे का भी उपयोग कर सकता है लक्जरी है, तो लिखने की जरूरत है।

Answer 2

मुझे यकीन है कि css साथ आप यह कर सकते हैं कर रहा हूँ:

td { width: 200px } 

Answer 3

तय <td> तत्वों के लिए चौड़ाई काम करना चाहिए लागू करने। यदि यह आपके लिए काम नहीं कर रहा है, तो शायद आपके द्वारा निर्दिष्ट शैली को ओवरराइड करने वाली शैली है या आपके सीएसएस में एक वाक्यविन्यास त्रुटि है। क्या आप इकाइयों को भूल गए थे (उदा। पीएक्स, एम)? यह निर्धारित करने के लिए कि कौन सी शैलियों को लागू/ओवरराइड किया जा रहा है, फ़ायरबग (या एक समान टूल) का उपयोग करें। आम तौर पर, यह करने के लिए कुछ इसी तरह काम करना चाहिए:

td { 
    width: 200px; 
} 

मैं अगर यह आपके codebase के लिए संभव है पता नहीं है, लेकिन एक और विकल्प कई <tbody> तत्वों के साथ एक एकल तालिका निर्दिष्ट करने के लिए है। इस तरह:

<table> 

<tbody><tr> 
    <td>Col 1 Table 1</td> 
    <td>Col 2 Table 1</td> 
    <td>Col 3 Table 1</td> 
</tr></tbody> 

<tbody><tr> 
    <td>Col 1 Table 2</td> 
    <td>Col 2 Table 2</td> 
    <td>Col 3 Table 2</td> 
</tr></tbody> 

</table> 

आपके 2 टेबल के बीच दिखाई देने वाला कोई भी मार्कअप भी बड़ी तालिका का हिस्सा बनने की आवश्यकता होगी। आप उस सामग्री को तीसरे <tbody> तत्व में रख सकते हैं जिसमें आवश्यक होने पर केवल एक पंक्ति और एक सेल होता है। दोबारा, मुझे यकीन नहीं है कि आपका कोडबेस खुद को इस रिफैक्टरिंग में कितना अच्छा दे सकता है, लेकिन मैं इसे एक विकल्प के रूप में बाहर रख रहा हूं।

Answer 4

टेबल लोड होने के बाद जावास्क्रिप्ट का उपयोग करने का प्रयास करें।

Answer 5

आप सीएसएस स्टाइल का उपयोग कैसे करते हैं? आपको प्रत्येक तालिका की पहली पंक्ति में कक्षों की निश्चित चौड़ाई सेट करनी चाहिए।

<table> 
    <tr> 
    <td style="width:100px"></td> 
    <td style="width:120px"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 

संपादित करें: यह निश्चित रूप से सीएसएस वर्गों का उपयोग करने के लिए बेहतर है, लेकिन आप बदल सकते हैं कि वह आपके लिए काम करता है कि एक बार आप देखेंगे।

<table> 
    <tr> 
    <td class="c1"></td> 
    <td class="c2"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 
<!-- ... --> 
<table> 
    <tr> 
    <td class="c1"></td> 
    <td class="c2"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 

आदि ..