html - tag - w3schools css




Colspan সব কলাম (9)

আমি কীভাবে একটি td ট্যাগ উল্লেখ করতে পারি যা সমস্ত কলামগুলি ছড়িয়ে দিতে হবে (যখন টেবিলের সঠিক সংখ্যক কলামগুলি পরিবর্তনশীল / এইচটিএমএল সরবরাহ করা হয় তখন নির্ধারণ করা কঠিন হবে)? w3schools উল্লেখ করে আপনি colspan="0" ব্যবহার করতে পারেন, তবে এটি ঠিক বলে না যে ব্রাউজারটি কী মান সমর্থন করে (IE 6 আমাদের তালিকায় সমর্থন করে)।

মনে হচ্ছে যে colspan আপনার যে তাত্ত্বিক স্তরের কলামগুলি আছে colspan চেয়ে বেশি colspan কাজ করবে তবে আপনার table-layout সেটটি fixed থাকলে এটি কাজ করবে না। colspan জন্য একটি বড় সংখ্যা সঙ্গে একটি স্বয়ংক্রিয় বিন্যাস ব্যবহার করার কোনো অসুবিধা আছে? এই কাজ করার আরো সঠিক উপায় আছে?


"colspan" এর পরিবর্তে "colspan" ব্যবহার করে দেখুন। IE উট ব্যাক্যাক সংস্করণ লেগেছে ...


IE 6 এর জন্য, আপনি আপনার টেবিলে কলামগুলির সংখ্যাতে সমান সমান করতে চান। যদি আপনার 5 কলাম থাকে তবে আপনি চান: colspan="5"

কারণ হল যে IE ভিন্নভাবে কলস্প্যান পরিচালনা করে , এটি এইচটিএমএল 3.2 স্পেসিফিকেশন ব্যবহার করে:

IE এইচটিএমএল 3.2 সংজ্ঞা প্রয়োগ করে, এটি colspan=0 colspan=1 হিসাবে সেট করে।

বাগ ভাল নথিভুক্ত করা হয়


আপনি যদি jQuery ব্যবহার করছেন (অথবা এটি যুক্ত করার কথা মনে করবেন না), এই হ্যাকগুলির যেকোনো একটির চেয়েও এটি আরও ভাল কাজ করবে।

function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
        var colCount = 0;
        $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
            var cc = Number($(oo).attr('colspan'));
            if (cc) {
                colCount += cc;
            } else {
                colCount += 1;
            }
        });
        if(colCount > maxCol) { maxCol = colCount };
    });

    return maxCol;

}

বাস্তবায়ন সহজ করার জন্য, আমি যে কোনও td / th সাজাইয়াছি, যেমনটি "maxCol" হিসাবে ক্লাসের সাথে সামঞ্জস্য করার প্রয়োজন হলে আমি নিম্নলিখিতটি করতে পারি:

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

যদি আপনি কোনও বাস্তবায়ন খুঁজে পান তবে এটি কাজ করবে না, উত্তরটি স্ল্যাম করবেন না, মন্তব্যগুলিতে ব্যাখ্যা করুন এবং এটি আচ্ছাদিত করা হলে আমি আপডেট করব।


আপনি যদি আপনার টেবিলে হেডার হিসাবে সমস্ত কলাম স্প্যানিশ করে এমন একটি 'শিরোনাম' সেল তৈরি করতে চান তবে আপনি ক্যাপশন ট্যাগটি ব্যবহার করতে চাইতে পারেন ( http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ) এই উপাদানটির উদ্দেশ্য এই উদ্দেশ্যে। এটি একটি div মত আচরণ করে, কিন্তু টেবিলের পিতা-মাতার পুরো প্রস্থকে প্রসারিত করে না (যেমন একটি ডিভি একই অবস্থানে কাজ করবে (এটি বাড়িতে চেষ্টা করবেন না!)), পরিবর্তে এটি প্রস্থ টেবিল। সীমান্তের সাথে কিছু ক্রস ব্রাউজার সমস্যা রয়েছে এবং এগুলি (আমার জন্য গ্রহণযোগ্য ছিল)। যাইহোক, আপনি এটি সমস্ত কলাম spans যে একটি সেল হিসাবে চেহারা করতে পারেন। ভিতরে, আপনি div উপাদান যোগ করে সারি করতে পারেন। আপনি TR-উপাদানের মধ্যে এটি সন্নিবেশ করতে পারেন কিনা তা নিশ্চিত নই, তবে এটি হ্যাক হ'ল হ্যাক হবে (তাই প্রস্তাবিত নয়)। আরেকটি বিকল্প ভাসমান divs সঙ্গে messing হবে, কিন্তু যে Yuck হয়!

করা

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

না

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>

আমারও একই সমস্যা ছিল - আমি কীভাবে আমার সমস্যা সমাধান করেছি .. আপনি যে কোনও নিয়ন্ত্রণকে এক টিডিতে রাখতে চান


আরেকটি কাজ কিন্তু কুৎসিত সমাধান: colspan="100" , যেখানে 100 মোট কলামের চেয়ে আপনার মানটি বড়।

W3C অনুসারে, colspan="0" বিকল্প শুধুমাত্র COLGROUP ট্যাগের সাথে বৈধ।


শুধু আমার অভিজ্ঞতা এবং এই উত্তর যোগ করতে চান।
দ্রষ্টব্য: এটি শুধুমাত্র তখনই কাজ করে যখন আপনার পূর্ব-সংজ্ঞায়িত table এবং একটি tr তবে আপনার সারিতে লোড হচ্ছে (উদাহরণস্বরূপ AJAX এর মাধ্যমে)।

এই ক্ষেত্রে আপনি আপনার প্রথম শিরোনাম সারিতে আছে সেগুলির সংখ্যা গণনা করতে পারেন এবং সমগ্র কলামটি ছড়িয়ে দেওয়ার জন্য এটি ব্যবহার করতে পারেন।

কোন ফলাফল খুঁজে পাওয়া গেলে আপনি একটি বার্তা রিলে করতে চাইলে এটি প্রয়োজন হতে পারে।

JQuery এ এমন কিছু, যেখানে table আপনার ইনপুট টেবিল হয়:

var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
    //Assume having one row means that there is a header
    var headerColumns = $(trs).find("th").length;
    if (headerColumns > 0) {
        numberColumns = headerColumns;
    }
}

শুধু এই ব্যবহার করুন:

colspan="100%"

এটি ফায়ারফক্স 3.6, IE 7 এবং অপেরা 11 এ কাজ করে! (এবং আমি অন্যদের উপর অনুমান, আমি চেষ্টা করতে পারে না)

সতর্কতা: নিচের মতামতগুলিতে উল্লিখিত হিসাবে এটি আসলে colspan="100" হিসাবে একই। অতএব, এই সমাধানটি CSS table-layout: fixed সাথে টেবিলগুলির জন্য ভাঙ্গবে table-layout: fixed , বা 100 টির বেশি কলাম।


হয়তো আমি একটি সোজা চিন্তাবিদ কিন্তু আমি একটু বিরক্তিকর, আপনি আপনার টেবিলের কলাম সংখ্যা জানেন না?

IE6 কোন colgroup সংজ্ঞায়িত সঙ্গে বা ছাড়া, colspan = "0" সম্মান করে না। আমি কলামের গোষ্ঠী জেনারেট করার জন্য থ্যাড এবং থ ব্যবহার করার চেষ্টা করেছি কিন্তু ব্রাউজার ফর্ম colspan = "0" স্বীকৃতি দেয় না।

আমি উইন্ডোজ 3.0 এবং উইন্ডোজ এ ফায়ারফক্স দিয়ে চেষ্টা করেছি এবং এটি শুধুমাত্র কঠোর ডক্ট টাইপ দিয়ে কাজ করে।

আপনি বিভিন্ন bowser উপর একটি পরীক্ষা পরীক্ষা করতে পারেন

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

আমি এখানে http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html পরীক্ষা পৃষ্ঠাটি খুঁজে পেয়েছি

সম্পাদনা করুন: লিঙ্কটি অনুলিপি করুন এবং আটকান, ফরম্যাটিং লিঙ্কটিতে ডবল প্রোটোকল অংশগুলি গ্রহণ করবে না (অথবা আমি সঠিকভাবে এটি ফরম্যাট করার জন্য স্মার্ট নই)।







tablelayout