문제
어떻게 지정할 수 있습니까? 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
요소는 acolspan
지정된 컨텐츠 속성, 값은 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
~와 함께 th
S, 그러나 행에로드 (예 : 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 버전을 좋아합니다 ...