•  29-08-2019
  •  | 
  •  

문제

어떻게 지정할 수 있습니까? td 태그는 모든 열에 걸쳐 있어야합니다 (테이블의 정확한 열이 가변적/가변적/HTML이 렌더링되는시기를 결정하기가 어려운 경우)? W3Schools 당신이 사용할 수있는 언급 colspan="0", 그러나 그것은 어떤 브라우저가 그 값을 지원하는지 정확히 말하지 않습니다 (예 : 6은 우리의 목록에 지원합니다).

그 설정이 보입니다 colspan 이론적 인 열의 열보다 큰 값으로 작동하지만 작동하지 않으면 작동하지 않습니다. table-layout 로 설정 fixed. 많은 수의 자동 레이아웃을 사용하는 데 단점이 있습니까? colspan? 더 정확한 방법이 있습니까?

도움이 되었습니까?

해결책

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

td의 colspan = "0"속성은 스패닝되지 않습니다 모든 TD에 걸쳐 위의 브라우저 중 하나.

적절한 마크 업 연습으로 권장하지는 않지만 가능한 총 가능성보다 높은 콜프 팬 값. 다른 줄의 열, 그러면 TD는 모든 열에 걸쳐 있습니다.

테이블 레이 아웃 CSS 속성이 고정되도록 설정된 경우에는 작동하지 않습니다.

다시 한 번, 이것은 완벽한 솔루션이 아니지만 테이블 레이 아웃 CSS 속성이있을 때 위에서 언급 한 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- 요소 사이에 삽입 할 수 있는지 확실하지 않지만 해킹이 될 것입니다 (권장하지 않음). 또 다른 옵션은 떠 다니는 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>

IE 6의 경우, Colspan을 테이블의 열 수와 동일하게하려고합니다. 5 개의 열이 있다면 다음을 원할 것입니다. colspan="5".

그 이유는 그 이유입니다 즉, 콜 스팬을 처리합니다 다르게 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/T를 장식 한 다음 다음을 수행 할 수 있습니다.

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

구현이 작동하지 않으면 작동하지 않으면 답을 슬램하지 말고 의견으로 설명하면 덮을 수있는 경우 업데이트하겠습니다.

부분적인 대답으로 다음은 다음과 같은 몇 가지 요점이 있습니다. 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 Living Standard (오늘 지배적 인 표준) 및 최신 W3 HTML 5 사양은 모두 위의 HTML 4에서 인용 한 문구를 포함하지 않으며 만장일치로 동의합니다. colspan 이 문구는 세 가지 사양 모두에 나타나는 0의 0은 허용되지 않습니다.

    그만큼 td 그리고 th 요소는 a colspan 지정된 컨텐츠 속성, 값은 0보다 큰 유효한 비 음성 정수 여야합니다 ...

    출처 :

  • 다음의 주장 W3Schools 페이지는 질문에 링크되었습니다 적어도 요즘 - 완전히 거짓입니다 :

    Firefox만이 Colspan = "0"을 지원합니다. 특별한 의미가 있습니다 ... [It]은 브라우저에 셀을 열 그룹의 마지막 열 (Colgroup)에 전달하도록 지시합니다.

    그리고

    HTML 4.01과 HTML5의 차이

    없음.

    W3Schools가 일반적으로 웹 개발자가 빈번한 부정확성에 대해 경멸에 처해 있음을 아직 모른다면,이 교훈을 이유를 고려하십시오.

또 다른 작동하지만 추악한 해결책 : 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;
    }
}

사양에 따라 colspan="0" 테이블 너비 TD를 초래해야합니다.

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

http://www.w3.org/tr/rec-html40/struct/tables.html#adef-colspan

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

어쩌면 나는 똑바로 사상가 일지 모르지만 조금 당황 스럽습니다. 테이블의 열 번호를 모르십니까?

그건 그렇고 IE6은 콜 그룹이 정의되거나없는 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"대신 "colspan"을 사용해보십시오. 즉, Camelback 버전을 좋아합니다 ...

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top