[英]Set html table column's width based on header width
我試圖讓我的html表與基於SO Post的 tbody
的垂直滾動條一起使用。 我使滾動條正常工作,但是努力地動態設置列的寬度。 建議的SO答案根據tbody列的寬度設置標題列的寬度。 我想做相反的事情。 我正在嘗試根據標題列的寬度設置tbody列的寬度(僅第一行)。
html
<table class="table mytable">
<thead>
<tr>
<th style="border-top:2px solid #ddd"></th>
<th colspan="4" style="text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd">Group 1</th>
<th colspan="4" style="text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd">Group 2</th>
<th style="border-top:2px solid #ddd">Group 3</th>
</tr>
<tr>
<th style="width:200px">Col 1</th>
<th style="width:150px;border-left:1px solid #ddd">Col 2</th>
<th style="width:150px">Col 3</th>
<th style="width:150px" class="td-md">Col 4</th>
<th style="width:150px">Col 5</th>
<th style="width:150px;border-left:1px solid #ddd">Col 6</th>
<th style="width:150px">Col 7</th>
<th style="width:150px">Col 8</th>
<th style="width:150px">Col 9</th>
<th style="width:150px;border-left:1px solid #ddd">Col 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>A12345</td>
<td>1254</td>
<td>200</td>
<td>43243</td>
<td>432</td>
<td>4323</td>
<td>4324</td>
<td>434</td>
<td>4343244</td>
<td>4343244</td>
</tr>
<tr>
<td>A12345</td>
<td>1254</td>
<td>200</td>
<td>43243</td>
<td>432</td>
<td>4323</td>
<td>4324</td>
<td>434</td>
<td>4343244</td>
<td>4343244</td>
</tr>
<tr>
<td>A12345</td>
<td>1254</td>
<td>200</td>
<td>43243</td>
<td>432</td>
<td>4323</td>
<td>4324</td>
<td>434</td>
<td>4343244</td>
<td>4343244</td>
</tr>
<tr>
<td>A12345</td>
<td>1254</td>
<td>200</td>
<td>43243</td>
<td>432</td>
<td>4323</td>
<td>4324</td>
<td>434</td>
<td>4343244</td>
<td>4343244</td>
</tr>
<tr>
<td>A12345</td>
<td>1254</td>
<td>200</td>
<td>43243</td>
<td>432</td>
<td>4323</td>
<td>4324</td>
<td>434</td>
<td>4343244</td>
<td>4343244</td>
</tr>
</tbody>
</table>
Java腳本
$(function () {
// Change the selector if needed
var $table = $('.mytable'),
$bodyCells = $table.find('thead tr:nth-child(2) th'),
colWidth;
var alertWidth = '';
// Get the header columns width array
colWidth = $bodyCells.map(function() {
var $this = $(this);
alertWidth += $this.width() + ",";
return $this.width();
}).get();
alert(alertWidth);
// Set the width of first row's column
$table.find('tbody tr:first td').each(function(i, v) {
//alert(colWidth[i]);
$(v).width(colWidth[i]);
});
})
的CSS
thead, tbody {
display: block;
}
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
問題
這里的問題是jquery的width()
函數返回的值與th
設置的值不同。 如果我在瀏覽器中檢查HTML中的width
財產td
不匹配相應的th
我都試過.css("width")
以及與noluck。 一世
刪除Java腳本,並將所有CSS替換為:
table ,tr td{
border:1px solid red
}
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
width:400px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.