모든 열을 정렬

td태그를 어떻게 지정하면 모든 열에 걸쳐 있어야 합니까 (테이블의 정확한 열 수가 HTML 렌더링 시점을 결정하기 위해 가변적이거나 어려운 경우)? w3schools 는 사용할 수 colspan="0"있다고 언급 하지만 브라우저가 해당 값을 지원하는 브라우저를 정확하게 말하지는 않습니다 (IE 6이 지원 목록에 있습니다).

colspan이론적 인 열 수보다 큰 값으로 설정 하면 효과가 있지만로 table-layout설정 하면 작동하지 않습니다 fixed. 자동 레이아웃을 사용하는 데 단점이 colspan있습니까? 더 올바른 방법이 있습니까?

IE 7.0, Firefox 3.0 및 Chrome 1.0이 있습니다.

TD의 colspan = "0"속성 이 위의 브라우저 에서 모든 TD에 걸쳐 있지는 않습니다 .

적절한 마크 업 방법으로 권장되지는 않지만 가능한 최대 값보다 colspan 값이 더 높은 경우 . 다른 행에있는 열의 경우 TD는 모든 열에 걸쳐 있습니다.

테이블 레이아웃 CSS 속성이 fixed로 설정되어 있으면 작동하지 않습니다.

다시 한번, 이것은 완벽한 솔루션은 아니지만 table-layout CSS 속성이 automatic 일 때 위에서 언급 한 3 가지 브라우저 버전에서 작동하는 것 같습니다 . 도움이 되었기를 바랍니다.

이것을 사용하십시오 :

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 요소 사이에 삽입 할 수 있는지 확실하지 않지만 추측할만한 해킹 일 것입니다. 또 다른 옵션은 부동 div로 혼란 스러울 것입니다.

하다

<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"열이 전체 테이블에 걸쳐 있어야하지만 아무도 이것을 구현하지 않았으며 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 ( "0")은 셀이 현재 열에서 셀이 정의 된 열 그룹 (COLGROUP)의 마지막 열까지 모든 열에 걸쳐 있음을 의미합니다.

  그러나 대부분의 브라우저는 이것을 구현하지 않았습니다.

• HTML 5.0 (2012 년 후보 추천으로 변경), WhatWG HTML 생활 표준 (오늘날 주요 표준) 및 최신 W3 HTML 5 사양에는 모두 위의 HTML 4에서 인용 한 문구가 포함되어 있지 않으며 만장일치로 colspan0의 이 세 단어 모두에 나타나는이 문구와 함께 허용되지 않습니다.

  td및 th요소가있을 수 colspan값이 0이 아닌 유효한 음이 아닌 정수 커야 콘텐츠 속성 지정을 ...

  출처 :

  • 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"을 지원하는데, 이는 특별한 의미가 있습니다 ... [It]는 브라우저가 셀을 열 그룹 (colgroup)의 마지막 열까지 확장하도록 지시합니다

  과

  HTML 4.01과 HTML5의 차이점

  없음

  웹 개발자가 W3Schools가 일반적으로 부정확 한 것으로 자주 경멸하고 있다는 사실을 아직 모르는 경우, 이것이 왜 교훈인지 고려하십시오.

IE 6의 경우 colspan을 테이블의 열 수와 같습니다. 열이 5 개인 경우 다음이 필요 colspan="5"합니다..

그 이유는 IE가 colspan을 다르게 처리 하기 때문에 HTML 3.2 사양을 사용하기 때문입니다.

IE는 HTML 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;

}

구현을 쉽게하기 위해 "maxCol"과 같은 클래스로 조정해야하는 모든 td / th를 장식 한 후 다음을 수행 할 수 있습니다.

$('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및 trwith with를 가지고 th있지만 행 (예 : 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는 colgroup이 정의되거나 정의되지 않은 colspan = "0"을 존중하지 않습니다. 열 그룹을 생성하기 위해 thead와 th를 사용하려고 시도했지만 브라우저가 colspan = "0"형식을 인식하지 못합니다.

Windows 및 Linux에서 Firefox 3.0을 사용해 보았으며 엄격한 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

편집 : 링크를 복사하여 붙여 넣으십시오. 서식이 링크의 이중 프로토콜 부분을 허용하지 않습니다 (또는 올바르게 형식을 지정하는 것이 현명하지 않습니다).

사양 colspan="0"에 따라 테이블 너비 td가 발생해야합니다.

그러나 테이블 너비가있는 경우에만 해당됩니다! 테이블에는 너비가 다른 행이 포함될 수 있습니다. 따라서 colgroup 을 정의 하면 렌더러가 테이블의 너비를 알고있는 유일한 경우입니다 ! 그렇지 않으면 colspan = "0"의 결과를 결정할 수 없습니다 ...

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

구형 브라우저에서 테스트 할 수는 없지만 4.0 이후 사양의 일부입니다 ...

"colspan"대신 "colSpan"을 사용해보십시오. IE는 camelBack 버전을 좋아합니다 ...