HTML+CSS के साथ तालिका स्तंभ चौड़ाई को सिंक्रनाइज़ करने का कोई भी तरीका?




(6)

मेरे पास एक ही कॉलम के साथ कई तालिकाओं हैं और अगर वे समान कॉलम चौड़ाई साझा करते हैं तो यह बहुत अच्छा लगेगा। क्या ऐसा करना संभव है? उन दोनों के बीच की सीमाओं के साथ कुछ पंक्तियों में उसी तालिका में डाल देना एक विकल्प नहीं है।

संपादित करें: हाँ, मुझे पता है कि मैं चौड़ाई खुद तय कर सकता हूं, लेकिन मैं उस चीज़ की उम्मीद कर रहा था जो ब्राउज़र के कॉलम चौड़ाई एल्गोरिथ्म में बाँधता है, लेकिन उस लेआउट के उद्देश्य के लिए केवल दो या दो से अधिक तालिकाओं को एक साथ बांधा गया है।

मुझे नहीं लगता था कि ऐसी बात संभव थी, लेकिन मैंने सोचा था कि मैं मामले की जांच करूँगा।


केन के उत्तर में विस्तार करने के लिए, आप पिक्सल में सटीक चौड़ाई भी निर्दिष्ट कर सकते हैं:

td { width: 250px }

या ईएमएस (पत्र मीटर की चौड़ाई):

td { width: 32em }

या पूर्व या पीटी या जो कुछ भी (अच्छी तरह से ... वास्तव में%, pt, px, em, ex हो सकता है)। यदि आपको अपने स्तंभों की अलग-अलग चौड़ाई होने की आवश्यकता है, तो तालिका कक्ष कक्षाएं देना आसान तरीका है:

<table><tr>
    <td class="col1">...</td><td class="col2">...</td>...
</tr></table>

और वर्गों के लिए स्तंभ चौड़ाई असाइन करें:

td.col1 { width: 48em }
td.col2 { width: 200px }
...

यह प्रत्येक तालिका में पहली पंक्ति में स्तंभ चौड़ाई असाइन करने के लिए पर्याप्त होना चाहिए। [संपादित करें: ऐसा लगता है कि जब तक मैं लिख रहा था)

आप शायद सीएसएस 2 भाईचारे चयनकर्ता के साथ पागल हो सकते हैं, और ऐसा कुछ लिख सकते हैं

tr > td:first-child { width:48em } /* first column */
tr > td:first-child + td { width: 200px } /* second column */
tr > td:first-child + td + td { width: 5% } /* third column  */
...

लेकिन यदि आपके पास कुछ कॉलम से अधिक है, तो यह बदसूरत हो सकता है और अगर आप इन टेम्बल्स को बनाने के लिए किसी प्रकार का टेम्प्लेट सिस्टम या स्क्रिप्ट का उपयोग कर रहे हैं, तो मुझे यकीन है कि यह सिर्फ एक बार आपके टेम्पलेट में प्रत्येक कक्ष पर क्लास = "कॉल #" विशेषता को डाल देने के लिए आसान / स्पष्ट होगा


मुझे लगभग चौंक गया हूँ कि कोई भी स्तंभ समूहों का सुझाव नहीं दे रहा है! इसके साथ आप एक स्तंभ को एक विशिष्ट वर्ग, चौड़ाई, और अन्य सहायक गुण दे सकते हैं। और चूंकि यह एचटीएमएल 4.01 है, यह सभी ब्राउज़रों द्वारा समर्थित है, जो कूटनीति का समर्थन करते हैं।


यहाँ एक छोटा जावास्क्रिप्ट है जो मैंने एक पृष्ठ पर सभी तालिकाओं में समान चौड़ाई बनाने के लिए सेल का आकार बदलने के लिए बनाया है।

function resizeTables()
{
    var tableArr = document.getElementsByTagName('table');
    var cellWidths = new Array();

    // get widest
    for(i = 0; i < tableArr.length; i++)
    {
        for(j = 0; j < tableArr[i].rows[0].cells.length; j++)
        {
           var cell = tableArr[i].rows[0].cells[j];

           if(!cellWidths[j] || cellWidths[j] < cell.clientWidth)
                cellWidths[j] = cell.clientWidth;
        }
    }

    // set all columns to the widest width found
    for(i = 0; i < tableArr.length; i++)
    {
        for(j = 0; j < tableArr[i].rows[0].cells.length; j++)
        {
            tableArr[i].rows[0].cells[j].style.width = cellWidths[j]+'px';
        }
    }
}

window.onload = resizeTables;

यह केवल तभी संभव है जब आप स्तंभों को ठीक कर सकते हैं। यदि आप एक निश्चित चौड़ाई निर्धारित कर सकते हैं तो इस तरह कुछ सीएसएस काम करना चाहिए:

td {
    width: 25%;
}

आप प्रत्येक कॉलम चौड़ाई को इस प्रकार अनुकूलित कर सकते हैं:

<table>
  <tr>
    <td class="col1">...</td>
    <td class="col2">...</td>
  </tr>
</table>
...
<table>
  <tr>
    <td class="col1">...</td>
    <td class="col2">...</td>
  </tr>
</table>

और फिर इस तरह चौड़ाई निर्दिष्ट करें:

.col1 {
   width: 25%;
}
.col2 {
   width: 75%;
}

तालिकाओं की प्रत्येक जोड़ी एक ही चौड़ाई में अपने कॉलम का आकार बदलती है
ओले जे हेलसेसन के समान है, लेकिन जेक्व्री के साथ और एक पैरामीटर का चयन करने के लिए कौन सी तालिकाएं बराबर होती हैं
(मैं वोट नहीं कर सकता लेकिन यह आपके समाधान का मूलतः है)

<table data-ss="1" border="1">
  <tr><td>asdf<td>129292<td>text
</table>
<table data-ss="1" border=1>
  <tr><td>a<td>1<td>each column here has the same size than the table above
</table>
<table data-ss="2" border=1>
  <tr><td>asdf<td>129292<td>text
</table>
<table data-ss="2" border=1>
  <tr><td>each column here has the same size than the table above<td>a<td>1
</table>

और इस sctipt का उपयोग करें

$(function(){
  resizeTables('1');
  resizeTables('2');
});

//please set table html attribute `data-ss="something"` to properly call this js
// ss is short for SharedSize
function resizeTables(sharedSize){
  var tableArr = $('table[data-ss='+sharedSize+']');
  var cellWidths = new Array();
  $(tableArr).each(function() {
    for(j = 0; j < $(this)[0].rows[0].cells.length; j++){
       var cell = $(this)[0].rows[0].cells[j];
       if(!cellWidths[j] || cellWidths[j] < cell.clientWidth) cellWidths[j] = cell.clientWidth;
    }
  });
  $(tableArr).each(function() {
    for(j = 0; j < $(this)[0].rows[0].cells.length; j++){
        $(this)[0].rows[0].cells[j].style.width = cellWidths[j]+'px';
    }
  });
}

सबसे आसान तरीका एक 'गंदा' रास्ता है, लेकिन यह सबसे अच्छा काम करता है। यह वास्तव में क्या आवश्यक है:

बस अपने टेबल को एक मेज में मिलाएं। मेरे मामले में दो तालिकाओं के बीच एक ही चीज़ एक h3

तो मेरी मेज

<table>
<tr></tr>
<table>

<h3>Title<h3>

<table>
<tr></tr>
<table>

यह बन गया:

<table>
<tr></tr>

<tr><td colspan="6">
<h3>Title<h3>
</td></tr>

<tr></tr>
<table>

इस तरह आपकी तालिका 'सिंक' के आकार का होगा। बेशक यह केवल तभी काम करता है जब दो तालिकाओं के बीच बहुत जटिल सामग्री नहीं होती, लेकिन मैं ज्यादातर मामलों में अनुमान लगा रहा हूं, ऐसा नहीं है। अगर ऐसा होता है, तो सिंक्रनाइज़ेशन की आवश्यकता पहले स्थान पर नहीं होगी।





css