tbody와 thead의 열에 동일한 너비를 설정하려고합니다. tbody스크롤 가능, thead고정이 필요 하며 열 수가 고정되지 않았습니다 ...! 나는 똑같이 많이 google .... 내가 시도한 일부 코드 스 니펫 ....
먼저 예 를 들어 thead와 tbody나는 별도의 설정 div및 table. 여기에 나는 thead를 설정했습니다 style="display:block;".
<div style="border:solid;border-color:red;" >
<div style="border:solid;">
<table border="1" width="100%">
<thead style="background-color:red;display:block">
<tr>
<th style="width:40%"><span>Fruits</span></th>
<th style="width:40%"><span>Vitamin A</span></th>
<th style="width:40%"><span>Vitamin C</span></th>
</tr>
</thead>
</table>
</div>
<div style="height:80px; overflow:auto;border:solid;border-color:yellow;">
<table border="1" width="100%">
<tbody>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
</tbody>
</table>
</div>두 번째 예를 들어, 저는 여기에 동일하게 설정 div하고 table대한 thead및 tbody유지thead position:fixed
<div style="border:solid;overflow:scroll;height:80px">
<table border="1" width="100%">
<thead style="background-color:red;position:fixed;">
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
</tbody>
</table>
</div>누구든지 같은 문제에 직면했습니다 ...?
감사.
th와 td가 같은 너비에 대해 다음 코드를 시도하십시오.
div {
float: left;
width: 100%;
}
table {
float: left;
width: 100%;
}
thead {
background-color: red;
display: block;
float: left;
width: 98%;
}
tr {
float: left;
width: 100%;
}
th, td {
float: left;
text-align: center;
width: 32.6% !important;
}
span {
word-wrap: break-word;
}<div style="border:solid;border-color:red;" >
<div style="border:solid;background-color: red;">
<table border="1" width="100%">
<thead style="background-color:red;display:block">
<tr>
<th style="width:40%"><span>Fruits Fruits Fruits Fruits Fruits Fruits Fruits Fruits</span></th>
<th style="width:40%"><span>Vitamin A Vitamin A Vitamin A Vitamin A </span></th>
<th style="width:40%"><span>Vitamin C Vitamin C Vitamin C Vitamin C </span></th>
</tr>
</thead>
</table>
</div>
<div style="height:80px; overflow:auto;border:solid;border-color:yellow;">
<table border="1" width="100%">
<tbody>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
</tbody>
</table>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다