Colspan คอลัมน์ทั้งหมด

ฉันจะระบุtdแท็กควรครอบคลุมทุกคอลัมน์ได้อย่างไร (เมื่อจำนวนคอลัมน์ที่แน่นอนในตารางจะแปรผัน / ยากที่จะกำหนดว่า HTML จะแสดงผลอย่างไร) w3schoolsกล่าวถึงคุณสามารถใช้colspan="0"แต่ไม่ได้บอกว่าเบราว์เซอร์ใดที่สนับสนุนค่านั้น (IE 6 อยู่ในรายการของเราเพื่อสนับสนุน)

มันจะปรากฏขึ้นการตั้งค่าที่colspanจะเป็นใหญ่มูลค่ากว่ามูลค่าทางทฤษฎีของคอลัมน์ที่คุณอาจจะมีจะทำงาน แต่มันจะไม่ทำงานหากคุณมีการตั้งค่าให้table-layout fixedมีข้อเสียในการใช้เลย์เอาต์อัตโนมัติที่มีจำนวนมากcolspanหรือไม่? มีวิธีที่ถูกต้องมากขึ้นในการทำเช่นนี้?

ฉันมี IE 7.0, Firefox 3.0 และ Chrome 1.0

colspan = "0" แอตทริบิวต์ใน TD จะไม่ทอดข้าม TDs ทั้งหมดในเบราว์เซอร์ดังกล่าวข้างต้น

อาจไม่แนะนำให้ใช้เป็นมาร์กอัปที่เหมาะสม แต่ถ้าคุณให้ค่า colspan ที่สูงกว่าจำนวนที่เป็นไปได้ทั้งหมด ของคอลัมน์ในแถวอื่นจากนั้น TD จะครอบคลุมคอลัมน์ทั้งหมด

สิ่งนี้ไม่ทำงานเมื่อตั้งค่าคุณสมบัติ CSS ของเค้าโครงตารางเป็นคงที่

อีกครั้งนี้ไม่ได้เป็นโซลูชั่นที่สมบูรณ์แบบ แต่ดูเหมือนว่าจะทำงานในดังกล่าวข้างต้น 3 รุ่นเบราว์เซอร์เมื่อตารางรูปแบบ CSS ทรัพย์สินเป็นอัตโนมัติ หวังว่านี่จะช่วยได้

เพียงใช้สิ่งนี้:

colspan="100%"

ใช้งานได้กับ Firefox 3.6, IE 7 และ Opera 11! (และฉันเดาผู้อื่นฉันไม่สามารถลองได้)

คำเตือน: colspan="100"เป็นที่กล่าวถึงในความคิดเห็นด้านล่างนี้เป็นจริงเช่นเดียวกับ ดังนั้นวิธีนี้จะแบ่งสำหรับตารางที่มี css table-layout: fixedหรือมากกว่า 100 คอลัมน์

หากคุณต้องการสร้างเซลล์ 'ชื่อ' ที่ครอบคลุมทุกคอลัมน์ในฐานะส่วนหัวสำหรับตารางของคุณคุณอาจต้องการใช้แท็กคำบรรยายภาพ ( http://www.w3schools.com/tags/tag_caption.asp / https: // developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) องค์ประกอบนี้มีวัตถุประสงค์เพื่อวัตถุประสงค์นี้ มันทำงานเหมือน div แต่ไม่ขยายความกว้างทั้งหมดของพาเรนต์ของตาราง (เช่น div จะทำในตำแหน่งเดียวกัน (อย่าลองทำที่บ้าน!)) แต่จะครอบคลุมความกว้างของ โต๊ะ. มีปัญหาข้ามเบราว์เซอร์ที่มีเส้นขอบและเช่นนั้น (เป็นที่ยอมรับสำหรับฉัน) อย่างไรก็ตามคุณสามารถทำให้มันดูเป็นเซลล์ที่ครอบคลุมทุกคอลัมน์ ภายในคุณสามารถสร้างแถวโดยเพิ่มองค์ประกอบ div ฉันไม่แน่ใจว่าคุณสามารถแทรกไว้ในระหว่างองค์ประกอบ tr ได้หรือไม่ แต่นั่นอาจเป็นแฮ็คฉันเดา (ไม่แนะนำ) ตัวเลือกอื่นจะล้อเล่นกับ divs ลอย แต่นั่นมัน 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="0"ซึ่งถูกกล่าวถึงในคำถาม

tl; dr เวอร์ชั่น:

colspan="0"ไม่ทำงานในเบราว์เซอร์ใด ๆ W3Schools ผิดพลาด (ตามปกติ) HTML 4 บอกว่าน่าcolspan="0"จะทำให้คอลัมน์ครอบคลุมทั้งตาราง แต่ไม่มีใครนำมันไปใช้และมันถูกลบออกจาก spec หลังจาก 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>

  เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

  ขยายตัวอย่างข้อมูล

• สเป็ค HTML 4 (ตอนนี้เก่าและล้าสมัยแล้ว แต่ย้อนกลับไปตอนปัจจุบันเมื่อถามคำถามนี้) ได้บอกว่าcolspan="0"ควรได้รับการปฏิบัติเสมือนการทอดคอลัมน์ทั้งหมด:

  ค่าศูนย์ ("0") หมายความว่าเซลล์ครอบคลุมคอลัมน์ทั้งหมดจากคอลัมน์ปัจจุบันไปยังคอลัมน์สุดท้ายของกลุ่มคอลัมน์ (COLGROUP) ซึ่งมีการกำหนดเซลล์

  อย่างไรก็ตามเบราว์เซอร์ส่วนใหญ่ไม่เคยใช้งานสิ่งนี้

• HTML 5.0 (ทำตามคำแนะนำของผู้สมัครในปี 2012), มาตรฐานการใช้ชีวิต WhatWG HTML (มาตรฐานที่โดดเด่นในปัจจุบัน) และข้อมูลจำเพาะ W3 HTML 5 ล่าสุดทั้งหมดไม่มีข้อความที่ยกมาจาก HTML 4 ข้างต้นและเห็นด้วยอย่างเป็นเอกฉันท์ว่าเป็นcolspan0 ไม่อนุญาตด้วยถ้อยคำนี้ที่ปรากฏในรายละเอียดทั้งสาม:

  tdและthองค์ประกอบอาจจะมีcolspanแอตทริบิวต์เนื้อหาที่ระบุมีค่าจะต้องเป็นจำนวนเต็มมากขึ้นที่ถูกต้องไม่เป็นลบมากกว่าศูนย์ ...

  แหล่งที่มา:

  • https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-elements
  • https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements
  • https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-elements

• การอ้างสิทธิ์ต่อไปนี้จากหน้า W3Schools ที่เชื่อมโยงกับคำถามคืออย่างน้อยทุกวันนี้เป็นเท็จโดยสมบูรณ์:

  Firefox เท่านั้นรองรับ colspan = "0" ซึ่งมีความหมายพิเศษ ... [มัน] บอกให้เบราว์เซอร์ขยายเซลล์ไปยังคอลัมน์สุดท้ายของกลุ่มคอลัมน์ (colgroup)

  และ

  ความแตกต่างระหว่าง HTML 4.01 และ HTML5

  ไม่มี.

  หากคุณยังไม่ทราบว่า W3Schools ถูกนักพัฒนาเว็บหมิ่นประมาทเพราะความไม่ถูกต้องบ่อยครั้งให้พิจารณาบทเรียนนี้ในสาเหตุ

สำหรับ IE 6 คุณจะต้องการ colspan เท่ากับจำนวนคอลัมน์ในตารางของคุณ ถ้าคุณมี 5 colspan="5"คอลัมน์แล้วคุณจะต้องการ:

เหตุผลก็คือIE จัดการ colspansแตกต่างกันใช้ข้อกำหนด HTML 3.2:

IE ใช้ HTML 3.2 นิยามจะกำหนดเป็นcolspan=0colspan=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));
});

หากคุณพบว่าการติดตั้งใช้งานไม่ได้ผลอย่าตอบคำถามอธิบายในความคิดเห็นและฉันจะอัปเดตหากสามารถครอบคลุมได้

การทำงานอีก แต่วิธีการแก้ปัญหาที่น่าเกลียด: colspan="100"ที่ 100 colspanเป็นค่าที่มีขนาดใหญ่กว่าคอลัมน์ทั้งหมดที่คุณจำเป็นต้อง

ตาม W3C colspan="0"ตัวเลือกจะใช้ได้เฉพาะกับCOLGROUPแท็ก

ด้านล่างเป็นโซลูชัน es6 ที่กระชับ (คล้ายกับคำตอบของ Rainbabbaแต่ไม่มี jQuery)

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>

เพียงแค่ต้องการเพิ่มประสบการณ์ของฉันและตอบคำถามนี้
หมายเหตุ: ใช้งานได้เฉพาะเมื่อคุณมีการกำหนดไว้ล่วงหน้าtableและ a trกับths แต่จะโหลดในแถวของคุณ (เช่นผ่าน AJAX) แบบไดนามิก

ในกรณีนี้คุณสามารถนับจำนวนthแถวในส่วนหัวแรกของคุณและใช้เพื่อขยายคอลัมน์ทั้งหมด

สิ่งนี้สามารถจำเป็นเมื่อคุณต้องการถ่ายทอดข้อความเมื่อไม่พบผลลัพธ์

บางอย่างเช่นนี้ใน 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;
    }
}

บางทีฉันอาจเป็นนักคิดแบบตรงๆ แต่ฉันก็งงอยู่บ้างคุณไม่ทราบหมายเลขคอลัมน์ของตารางของคุณหรือ

โดยวิธีการที่ IE6 ไม่ให้เกียรติ colspan = "0" โดยมีหรือไม่มีการกำหนด colgroup ฉันพยายามใช้ thead และ th เพื่อสร้างกลุ่มคอลัมน์ แต่เบราว์เซอร์ไม่รู้จักรูปแบบ colspan = "0"

ฉันได้ลองใช้ Firefox 3.0 บน windows และ linux แล้วมันใช้ได้กับ doctype ที่เข้มงวดเท่านั้น

คุณสามารถตรวจสอบการทดสอบบนรถบรรทุกหลายคันได้ที่

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

ฉันพบหน้าทดสอบที่นี่http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

แก้ไข: กรุณาคัดลอกและวางลิงค์การจัดรูปแบบจะไม่ยอมรับส่วนโปรโตคอลคู่ในลิงค์ (หรือฉันไม่ฉลาดในการจัดรูปแบบได้อย่างถูกต้อง)

ตามข้อกำหนดcolspan="0"ควรส่งผลให้ความกว้างของตาราง td

อย่างไรก็ตามนี่เป็นเรื่องจริงหากโต๊ะของคุณมีความกว้าง! ตารางอาจมีแถวที่มีความกว้างต่างกัน ดังนั้นในกรณีเดียวที่ renderer รู้ถึงความกว้างของตารางหากคุณกำหนด colgroup ! มิฉะนั้นผลลัพธ์ของ colspan = "0" ไม่สามารถระบุได้ ...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

ฉันไม่สามารถทดสอบกับเบราว์เซอร์รุ่นเก่าได้ แต่นี่เป็นส่วนหนึ่งของข้อกำหนดตั้งแต่ 4.0 ...

ลองใช้ "colSpan" แทน "colspan" IE ชอบเวอร์ชัน camelBack ...