colspan جميع الأعمدة

Question

كيف يمكنني تحديد td يجب أن تمتد العلامة على جميع الأعمدة (عندما تكون الكمية الدقيقة للأعمدة في الجدول متغير / من الصعب تحديد متى يتم تقديم HTML)؟ W3Schools. يذكر يمكنك استخدام colspan="0", ، لكن هذا لا يقول بالضبط ما يدعم المتصفحات هذه القيمة (أي 6 في قائمتنا لدعم).

يبدو أن الإعداد colspan إلى قيمة أكبر من المبلغ النظري للأعمدة التي قد تعمل، لكنها لن تعمل إذا كان لديك table-layout ضبط ل fixed. وبعد هل هناك أي عيوب لاستخدام تخطيط تلقائي مع عدد كبير ل colspanب هل هناك طريقة أكثر صحة للقيام بذلك؟

Answer 1

لدي IE 7.0 و Firefox 3.0 و Chrome 1.0

The Colspan = "0" السمة في TD لا يمتد عبر جميع TDS في أي من المتصفحات المذكورة أعلاه.

ربما لا ينصح بممارسة العلامات المناسبة، ولكن إذا أعطيت قيمة Colspan أعلى من إجمالي غير ممكن. أعمدة في صفوف أخرى, ، ثم يمتد TD جميع الأعمدة.

هذا لا يعمل عند تعيين خاصية Table-Layout CSS على ثابت.

مرة أخرى، هذا ليس الحل الأمثل ولكن يبدو أنه يعمل في إصدارات المستعرض الثلاثة المذكورة أعلاه عندما تكون خاصية Lable-Layout CSS التلقائي. وبعد أتمنى أن يساعدك هذا.

Answer 2

فقط استخدم هذا:

colspan="100%"

يعمل على Firefox 3.6، أي 7 والأوبرا 11! (وأعتقد على الآخرين، لم أستطع المحاولة)

---

تحذير: كما ذكر في التعليقات أدناه هذا هو في الواقع نفس colspan="100". وبعد وبالتالي، فإن هذا الحل سوف يكسر للجداول مع CSS table-layout: fixed, ، أو أكثر من 100 أعمدة.

Answer 3

إذا كنت ترغب في إنشاء خلية "عنوان" تدفق جميع الأعمدة، كأخبراء لجدولك، فقد ترغب في استخدام علامة التسمية التوضيحية (http://www.w3schools.com/tags/tag_caption.asp. / https://developer.mozilla.org/en-us/docs/web/html/element/caption.) هذا العنصر يعني لهذا الغرض. يتصرف مثل DIV، ولكن لا يمتد إلى عرض كامل من أصل الجدول (مثل DIV سيفعل في نفس الموقف (لا تحاول ذلك في المنزل!))، بدلا من ذلك، يمتد عرض جدول. هناك بعض مشاكل متصفح عبر الحدود ومثل هذه (كانت مقبولة بالنسبة لي). على أي حال، يمكنك أن تجعلها تبدو كخليعة تدفق جميع الأعمدة. داخل، يمكنك صنع صفوف عن طريق إضافة عناصر DIV. لست متأكدا مما إذا كان بإمكانك إدخاله بين عناصر TR، ولكن هذا سيكون اختراق أعتقد (حتى لا ينصح بذلك). خيار آخر سيكون العبث مع العائمة divs، ولكن هذا يوك!

يفعل

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

Answer 4

ل IE 6، سترغب في المساواة في Colspan لعدد الأعمدة في طاولتك. إذا كان لديك 5 أعمدة، فستحتاج إلى: colspan="5".

والسبب هو أن أي مقابض colspans. بشكل مختلف، يستخدم مواصفات HTML 3.2:

أي تنفذ تعريف HTML 3.2، وتشغيلها colspan=0 كما colspan=1.

الخطأ هو وثق بشكل جيد.

Answer 5

إذا كنت تستخدم 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));
});

إذا وجدت تنفيذ، فلن يعمل ذلك من أجله، فلا تغلق الإجابة، وشرح في التعليقات وسأقوم بالتحديث إذا كان يمكن تغطيته.

Answer 6

كإجابة جزئية، إليك بعض النقاط colspan="0", ، التي ذكر في السؤال.

TL؛ نسخة الدكتور:

colspan="0" لا يعمل في أي متصفح على الإطلاق. W3Schools خاطئ (كالعادة). قال HTML 4 ذلك colspan="0" يجب أن يسبب عمود تمتد إلى الجدول بأكمله، ولكن لا أحد قام بتطبيق هذا وتم إزالته من المواصفات بعد HTML 4.

بعض التفاصيل والأدلة:

• جميع المتصفحات الرئيسية تعادلها على أنها تعادل colspan="1".

  إليك عرض تجريبي هذا؛ جربه على أي متصفح تريده.

  td {
    border: 1px solid black;
  }

  <table>
    <tr>
      <td>ay</td>
      <td>bee</td>
      <td>see</td>
    </tr>
    <tr>
      <td colspan="0">colspan="0"</td>
    </tr>
    <tr>
      <td colspan="1">colspan="1"</td>
    </tr>
    <tr>
      <td colspan="3">colspan="3"</td>
    </tr>
    <tr>
      <td colspan="1000">colspan="1000"</td>
    </tr>
  </table>

• أتش تي أم أل 4 المواصفات (الآن القديمة والكادمة، ولكن مرة أخرى الحالية عند طلب هذا السؤال) فعل في الواقع يقول الذي - التي colspan="0" يجب أن تعامل كما تمتد جميع الأعمدة:

  تعني القيمة الصفرية ("0") أن الخلية تمتد جميع الأعمدة من العمود الحالي إلى العمود الأخير من مجموعة العمود (Colgroup) التي يتم فيها تعريف الخلية.

  ومع ذلك، لم تنفذ معظم المتصفحات هذا قط.

• HTML 5.0 (قدم توصية مرشحة مرة أخرى في عام 2012)، ومعيار Whatwg HTML Living Standard (المعيار المهيمن اليوم)، وأحدث W3 HTML 5 Spec فقط لا تحتوي على الصياغة المعروضة من HTML 4 أعلاه، وتوافق بالإجماع على أن colspan من 0 غير مسموح به، مع هذه الصياغة التي تظهر في جميع المواصفات الثلاثة:

  ال td و th العناصر قد يكون colspan سمة المحتويات المحددة، التي يجب أن تكون قيمة عدد صحيح غير سلبي ساري المفعول أكثر من الصفر ...

  مصادر:

  • https://www.w3.org/tr/html50/tabular-data.html#attributes-Common-To-TD-and--elements.
  • https://html.spec.whatwg.org/multipage/tables.html#attributes-Common-To-TD-and--elements.
  • https://www.w3.org/tra/html53/tabular-data.html#attributes-Common-TO-TD-TD-Th-Elements.

• المطالبات التالية من صفحة W3Schools مرتبطة بالمسألة هي - على الأقل في الوقت الحاضر - خطأ تماما:

  يدعم Firefox فقط Colspan = "0"، والذي يحتوي على معنى خاص ... [IT] يخبر المتصفح أن يمتد إلى الخلية إلى العمود الأخير من مجموعة العمود (Colgroup)

  و

  الاختلافات بين HTML 4.01 و HTML5

  لا أحد.

  إذا لم تكن تدرك بالفعل أن W3SChools محتجز عموما في ازدراء من قبل مطوري الويب لموافعها المتكررة، فكر في هذا الدرس في السبب.

Answer 7

آخر عمل ولكن الحل القبيح: colspan="100", ، حيث 100 قيمة أكبر من الأعمدة الإجمالية التي تحتاج إليها colspan.

وفقا ل W3C، colspan="0" الخيار صالح فقط مع COLGROUP بطاقة شعار.

Answer 8

أدناه هو محلول ES6 موجز (مماثلة ل إجابة Rainbabba ولكن بدون جيس).

Array.from(document.querySelectorAll('[data-colspan-max]')).forEach(td => {
    let table = td;
    while (table && table.nodeName !== 'TABLE') table = table.parentNode;
    td.colSpan = Array.from(table.querySelector('tr').children).reduce((acc, child) => acc + child.colSpan, 0);
});

html {
  font-family: Verdana;
}
tr > * {
  padding: 1rem;
  box-shadow: 0 0 8px gray inset;
}

<table>
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
    <th>Header 6</th>
  </tr>
</thead>
<tbod><tr>
  <td data-colspan-max>td will be set to full width</td>
</tr></tbod>
</table>

Answer 9

فقط أريد إضافة تجربتي والإجابة على هذا.
ملاحظة: يعمل فقط عندما يكون لديك محددة مسبقا table و tr مع thS، ولكن يتم تحميل في صفوفك (على سبيل المثال عبر AJAX) ديناميكيا.

في هذه الحالة، يمكنك حساب عدد thهناك في صف رأسك الأول، واستخدم ذلك لتمتد إلى العمود بأكمله.

يمكن أن تكون هناك حاجة إلى ذلك عند الرغبة في ترحيل رسالة عند عدم العثور على نتائج.

شيء مثل هذا في مسج، حيث 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;
    }
}

Answer 10

وفقا للمواصفات colspan="0" يجب أن يؤدي إلى عرض الجدول TD.

ومع ذلك، هذا صحيح فقط إذا كان طاولتك لديه عرض! قد يحتوي الجدول على صفوف من العروض المختلفة. لذلك، فإن الحالة الوحيدة التي يعرفها العارض بعرض الطاولة إذا كنت تحديد كولغروبفي خلاف ذلك، نتيجة Colspan = "0" غير قابل للتحويل ...

http://www.w3.org/tr/rec-html40/Strent/Tables.html#adef-colspan.

لا أستطيع اختباره على المتصفحات القديمة، ولكن هذا جزء من المواصفات منذ 4.0 ...

Answer 11

ربما أنا مفكر مستقيم لكنني في حيرة بعض الشيء، ألا تعرف عدد الأعمدة من طاولتك؟

بالمناسبة IE6 لا يحترم Colspan = "0"، مع أو بدون Colgroup المحدد. حاولت أيضا استخدام Thead And Th لتوليد مجموعات الأعمدة ولكن المستعرض لا يتراجع عن النموذج Colspan = "0".

لقد حاولت مع Firefox 3.0 على Windows و Linux ويعمل فقط مع Doctype صارم.

يمكنك التحقق من اختبار على عدة Bowser في

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

لقد وجدت صفحة الاختبار هنا http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html.

تحرير: يرجى نسخ الرابط والصقه، لن يقبل التنسيق أجزاء البروتوكول المزدوج في الرابط (أو أنا لست ذكيا جدا بتنسيقه بشكل صحيح).

Answer 12

كان لدي نفس المشكلة - كيف حل مشكلتي .. ضع أي عناصر تحكم ترغب في امتدادها في TD

Answer 13

حاول استخدام "colspan" بدلا من "colspan". أي يحب نسخة camelback ...