Colspan tất cả các cột

Làm cách nào tôi có thể chỉ định một tdthẻ nên trải rộng tất cả các cột (khi số lượng cột chính xác trong bảng sẽ thay đổi / khó xác định khi HTML được hiển thị)? w3schools đề cập đến bạn có thể sử dụng colspan="0", nhưng nó không nói chính xác trình duyệt nào hỗ trợ giá trị đó (IE 6 nằm trong danh sách của chúng tôi để hỗ trợ).

Có vẻ như cài đặt colspanthành một giá trị lớn hơn số lượng cột lý thuyết mà bạn có thể có sẽ hoạt động, nhưng nó sẽ không hoạt động nếu bạn đã table-layoutđặt thành fixed. Có bất kỳ nhược điểm nào khi sử dụng bố cục tự động với số lượng lớn colspankhông? Có cách nào đúng hơn để làm điều này?

Tôi có IE 7.0, Firefox 3.0 và Chrome 1.0

Thuộc tính colspan = "0" trong TD KHÔNG trải dài trên tất cả các TD trong bất kỳ trình duyệt nào ở trên .

Có thể không được khuyến nghị là thực hành đánh dấu thích hợp, nhưng nếu bạn cho giá trị colspan cao hơn tổng số không có thể. của các cột trong các hàng khác , sau đó TD sẽ trải rộng tất cả các cột.

Điều này KHÔNG hoạt động khi thuộc tính CSS bố trí bảng được đặt thành cố định.

Một lần nữa, đây không phải là giải pháp hoàn hảo nhưng dường như hoạt động trong 3 phiên bản trình duyệt được đề cập ở trên khi thuộc tính CSS bố trí bảng là tự động . Hi vọng điêu nay co ich.

Chỉ cần sử dụng này:

colspan="100%"

Nó hoạt động trên Firefox 3.6, IE 7 và Opera 11! (và tôi đoán người khác, tôi không thể thử)

Cảnh báo: như đã đề cập trong các bình luận bên dưới, điều này thực sự giống như colspan="100". Do đó, giải pháp này sẽ phá vỡ các bảng có css table-layout: fixedhoặc hơn 100 cột.

Nếu bạn muốn tạo một ô 'title' bao trùm tất cả các cột, làm tiêu đề cho bảng của bạn, bạn có thể muốn sử dụng thẻ chú thích ( http://www.w3schools.com/tags/tag_caption.asp / https: // developer.mozilla.org/en-US/docs/Web/HTML/Euity/caption) Yếu tố này có nghĩa cho mục đích này. Nó hoạt động như một div, nhưng không trải rộng toàn bộ chiều rộng của cha mẹ của bảng (giống như một div sẽ làm ở cùng một vị trí (đừng thử điều này ở nhà!)), Thay vào đó, nó trải dài theo chiều rộng của bàn. Có một số vấn đề về trình duyệt chéo với đường viền và như vậy (được chấp nhận đối với tôi). Dù sao, bạn có thể làm cho nó trông giống như một ô kéo dài tất cả các cột. Trong, bạn có thể tạo các hàng bằng cách thêm các phần tử div. Tôi không chắc liệu bạn có thể chèn nó vào giữa các yếu tố tr không, nhưng đó sẽ là một hack tôi đoán (vì vậy không nên). Một lựa chọn khác sẽ gây rối với các div nổi, nhưng đó là yuck!

Làm

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

Đừng

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

Như một câu trả lời một phần, đây là một vài điểm về colspan="0", được đề cập trong câu hỏi.

phiên bản tl; dr:

colspan="0"không hoạt động trong bất kỳ trình duyệt nào. W3Schools là sai (như thường lệ). HTML 4 nói rằng colspan="0"sẽ khiến một cột trải dài toàn bộ bảng, nhưng không ai thực hiện điều này và nó đã bị xóa khỏi thông số kỹ thuật sau HTML 4.

Một số chi tiết và bằng chứng:

• Tất cả các trình duyệt chính coi nó là tương đương với colspan="1".

  Đây là một bản demo cho thấy điều này; Hãy thử nó trên bất kỳ trình duyệt nào bạn thích.

  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>

  Chạy đoạn mãẨn kết quả

  Mở rộng đoạn trích

• Thông số kỹ thuật HTML 4 (hiện đã cũ và đã lỗi thời, nhưng hiện tại trở lại khi câu hỏi này được hỏi) thực sự đã nói rằng colspan="0"nên được coi là bao trùm tất cả các cột:

  Giá trị 0 ("0") có nghĩa là ô kéo dài tất cả các cột từ cột hiện tại đến cột cuối cùng của nhóm cột (COLGROUP) trong đó ô được xác định.

  Tuy nhiên, hầu hết các trình duyệt không bao giờ thực hiện điều này.

• HTML 5.0 (đã đưa ra khuyến nghị ứng cử viên vào năm 2012), tiêu chuẩn sống WhatWG HTML (tiêu chuẩn thống trị hiện nay) và tất cả thông số kỹ thuật W3 HTML 5 mới nhất đều không chứa từ ngữ được trích dẫn từ HTML 4 ở trên và nhất trí đồng ý rằng colspan0 không được phép, với từ ngữ này xuất hiện trong cả ba thông số kỹ thuật:

  Các phần tử tdvà thcó thể có một colspanthuộc tính nội dung được chỉ định, có giá trị phải là số nguyên không âm hợp lệ lớn hơn 0 ...

  Nguồn:

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

• Các khiếu nại sau đây từ trang W3Schools được liên kết đến trong câu hỏi là - ít nhất là ngày nay - hoàn toàn sai:

  Chỉ Firefox hỗ trợ colspan = "0", có ý nghĩa đặc biệt ... [Nó] bảo trình duyệt mở rộng ô đến cột cuối cùng của nhóm cột (colgroup)

  và

  Sự khác biệt giữa HTML 4.01 và HTML5

  KHÔNG AI.

  Nếu bạn chưa biết rằng W3Schools thường bị các nhà phát triển web khinh miệt vì sự không chính xác thường xuyên của nó, hãy xem đây là một bài học tại sao.

Đối với IE 6, bạn sẽ muốn bằng colspan với số lượng cột trong bảng của mình. Nếu bạn có 5 cột, thì bạn sẽ muốn:colspan="5" .

Lý do là IE xử lý colspans khác nhau, nó sử dụng đặc tả HTML 3.2:

IE thực hiện định nghĩa HTML 3.2, nó đặt colspan=0là colspan=1.

Các lỗi được ghi lại .

Nếu bạn đang sử dụng jQuery (hoặc không nhớ thêm nó), điều này sẽ giúp công việc được thực hiện tốt hơn bất kỳ hack nào trong số này.

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;

}

Để dễ dàng thực hiện, tôi trang trí bất kỳ td / th nào tôi cần điều chỉnh bằng một lớp như "maxCol" thì tôi có thể làm như sau:

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

Nếu bạn thấy việc triển khai này sẽ không hiệu quả, đừng bỏ qua câu trả lời, giải thích trong các bình luận và tôi sẽ cập nhật nếu nó có thể được bảo hiểm.

Một giải pháp hiệu quả nhưng xấu xí khác : colspan="100", trong đó 100 là giá trị lớn hơn tổng số cột bạn cần colspan.

Theo W3C, colspan="0"tùy chọn chỉ hợp lệ với COLGROUPthẻ.

Dưới đây là một giải pháp es6 ngắn gọn (tương tự như câu trả lời của Rainbabba nhưng không có 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>

Chỉ muốn thêm kinh nghiệm của tôi và trả lời cho điều này.
Lưu ý: Nó chỉ hoạt động khi bạn có một định nghĩa trước tablevà trvớith s, nhưng đang tải trong các hàng của bạn (ví dụ thông qua AJAX) một cách linh hoạt.

Trong trường hợp này, bạn có thể đếm số lượng th có trong hàng tiêu đề đầu tiên của mình và sử dụng số đó để kéo dài toàn bộ cột.

Điều này có thể cần thiết khi bạn muốn chuyển tiếp tin nhắn khi không tìm thấy kết quả.

Một cái gì đó như thế này trong jQuery, tablebảng đầu vào của bạn ở đâu:

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

Có thể tôi là một người suy nghĩ thẳng thắn nhưng tôi hơi bối rối, bạn không biết số cột của bảng sao?

Bằng cách này, IE6 không tôn vinh colspan = "0", có hoặc không có một nhóm được xác định. Tôi cũng đã thử sử dụng thead và th để tạo các nhóm cột nhưng trình duyệt không nhận ra dạng colspan = "0".

Tôi đã thử với Firefox 3.0 trên windows và linux và nó chỉ hoạt động với một loại tài liệu nghiêm ngặt.

Bạn có thể kiểm tra một bài kiểm tra trên một số bowser tại

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

Tôi tìm thấy trang thử nghiệm ở đây http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Chỉnh sửa: Vui lòng sao chép và dán liên kết, định dạng sẽ không chấp nhận các phần giao thức kép trong liên kết (hoặc tôi không thông minh để định dạng chính xác cho liên kết đó).

Theo đặc điểm kỹ thuật colspan="0"nên dẫn đến một chiều rộng bảng td.

Tuy nhiên, điều này chỉ đúng nếu bảng của bạn có chiều rộng! Một bảng có thể chứa các hàng có chiều rộng khác nhau. Vì vậy, trường hợp duy nhất mà trình kết xuất biết chiều rộng của bảng nếu bạn xác định một nhóm ! Mặt khác, kết quả của colspan = "0" là không thể xác định được ...

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

Tôi không thể kiểm tra nó trên các trình duyệt cũ hơn, nhưng đây là một phần của đặc tả kể từ 4.0 ...

hãy thử sử dụng "colSpan" thay vì "colspan". IE thích phiên bản camelBack ...