제목과 마찬가지로 열과 행을 셀 내용과 독립적으로 크기 조정할 수있는 HTML 표가 필요합니다. 행이 충분히 높지 않거나 열이 셀의 모든 내용을 표시 할만큼 충분히 넓지 않으면 해당 내용은 셀 뒤에서 사라져야합니다.셀 내용과 독립적으로 크기를 조정할 수있는 행과 열이있는 HTML 표
이th, td {
position: relative;
overflow: hidden;
}
td > span {
position: absolute;
top: 0px;
}
th > div {
position: relative;
}
(디자인은 다음과 같습니다
나는 (5), IE (9)가 아닌 파이어 폭스에서 다음 크롬에서 잘 작동 솔루션 (17)와 오페라 (11.61), 사파리 함께했다 각 td에는 span과 td 내의 스팬 안에있는 텍스트와 같은 "실제"내용 만 포함됩니다. 또한 각 행에는 초기 th가 있고 머리글 행에는 th 만 포함되며이 모든 th에는 div. DIV의 명시적인 높이와 너비를 설정하면 행의 너비와 높이를 설정할 수 있습니다.)
다음 HTML은 예를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
table {
border-width: 1px;
border-style: none none solid solid;
}
th, td {
border-width: 1px;
border-style: solid solid none none;
}
th > div {
height: 18px;
width: 50px;
}
th, td {
overflow: hidden;
position: relative;
}
td > span {
position: absolute;
top:0px;
}
th > div {
position: relative;
}
</style>
</head>
<body>
<table
cellspacing="0"
cellpadding="0"
style="font-size: 10pt"
>
<thead>
<tr>
<th><div>Header0</div></th>
<th><div>Header1</div></th>
<th><div style="width:25px">Header2</div></th>
</tr>
</thead>
<tbody>
<tr>
<th><div>Header1</div></th>
<td
style="
vertical-align: bottom
"
>
<span style="
font-size:6pt;
background-color: red;
">A</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">B</span>
</td>
</tr>
<tr>
<th><div>Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">C</span>
</td>
<td>
<span style="
font-size:30pt;
background-color: green;
">D</span>
</td>
</tr>
<tr>
<th><div style="height:10px">Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">E</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">F</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
이것은 크롬과 오페라에서 잘 작동합니다.이 두 가지 모두 td와 상대적으로 스팬을 배치합니다. 그러나 firefox에서 td의 위치 : relative는 완전히 무시되며 절대 위치 또는 상대 위치를 가진 테이블의 행 위에있는 첫 번째 조상과 관련하여 스팬이 배치됩니다. 위의 규칙 만에 그래서, 스팬의 꼭대기는 문서 본문의 상단에 붙어 있으며, 내가 추가하는 경우 : 스팬의
table {
position:relative
}
정상은 테이블의 상단에 붙어있다. 그러나 위치 : tr 또는 td에 적용되는 상대 값은 완전히 무시 된 것 같습니다.
해결 방법에 대한 통찰력을 얻으실 수 있습니다.
업데이트 Firefox는 단순히 표 셀의 상대 위치를 지원하지 않습니다. https://bugzilla.mozilla.org/show_bug.cgi?id=35168#c11을 참조하십시오. IMO, 이건 버그 야. "표준"이이 설정의 동작이 정의되지 않았다는 주장에도 불구하고, 다른 브라우저는 현명하고 유용한 방식으로이 문제를 구현하는 데 문제가없는 것 같아서 파이어 폭스가 원하는 이유가 무엇인지 잘 모르겠다. 이 사실상의 행동을 무시하십시오.
몇 가지 실험을 한 후, 두 가지 대안을 제시했습니다. 그 중 하나도 완벽하지 않으므로이 동일한 문제에 직면 한 다른 사람들에게 유용 할 수도 있고 그렇지 않을 수도 있습니다.
1) 테이블 셀에 정적 인 사용은 firefox의 문제를 거의 해결합니다 (다른 모든 언급 된 브라우저의 동작을 변경하지 않음). Howver, 테이블 셀에 위치를 정적으로 지정하면 테이블 셀에서 텍스트 정렬을 설정할 때 새로운 문제가 발생합니다. 언급 된 다른 모든 브라우저에서이 기능이 다시 정상적으로 작동하지만 (파이어 폭스는 셀 내에서 오른쪽으로 스팬을 렌더링 함), 파이어 폭스는 다른 동작을 다시 나타내며 외부의 외부 스팬을 보여줍니다.
2) 표 레이아웃을 테이블에 고정하고 셀 내용을 셀에 직접 입력하십시오 (별도의 범위 또는 div가 아님). 그런 다음 th 요소의 스타일에서 너비와 높이를 명시 적으로 설정할 수 있습니다 (div 요소의 너비/높이를 th 요소 내부에서 설정하는 것만으로는 충분하지 않습니다. 실제로이 작업을 th 요소에서 직접 수행해야합니다.) Google 워드 프로세서 스프레드 시트의 접근 방법이 방법을 사용하면 셀 내용이 셀보다 넓어 지지만 표 행의 높이를 셀 내용의 높이보다 낮게 만들 수는 없습니다.테이블 요소 상대 : 그것은 등을 충분히 쌓을 그래서
질문의 요지가 있지만 세부 정보, 특히 'span'사용법에 대한 부분은 100 % 확실하지 않습니다. 다음 중 귀하의 요구 사항 중 하나가이 바이올린에서 만나지 않았습니다 : http://jsfiddle.net/philipf/wa2vR/ –
안녕하세요 Philip! 답장을 보내 주셔서 감사합니다. 보이는 유망하지만 이것은 셀 안에 DIV의 높이를 명시 적으로 설정해야합니다 (TH의 내부에서 DIV의 높이와 너비를 명시 적으로 설정하는 것과 반대되는 모든 것). 솔루션의 TD 안에 DIV의 높이와 너비를 설정하지 않으면 행/열 크기가 여전히 셀 내용의 크기에 의해 무시됩니다. –