[英]Make table content fit to width with table width: 100% set in css
样品表
<table>
<tr>
<td>Age</td>
<td>12</td>
<td>Gender</td>
<td>Male</td>
<td>Some long label</td>
<td>Some long label value</td>
...
...
could be more...
</tr>
</table>
如果没有width:100%的内容应该适合每个列容器,但是我想使表扩展到整个页面。 设置表格宽度:100%均匀分配列。 我想使每个标签(标签:年龄,性别,长标签)适合其列容器,其余标签平均分配给它们(值:12,男性,长标签值)。
我知道设置<td width="5%">Age</td>
或在CSS中设置应该可以完成这项工作,但是我认为这会适得其反,特别是如果您必须使用很多列的话。
有没有办法用较少的代码(例如javascript或jquery)在CSS中完成此操作? 关于如何做到这一点的任何提示或指示?
注意:
我已经读过这篇文章,但我想避免在HTML中注入width =“%”。
可能是colgroup
可以帮助您。 试试这个
HTML是:
<table border = "1" cellspacing = "0" cellpadding = "0">
<colgroup>
<col>
<col style="width:40%">
<col>
<col style="width:40%">
</colgroup>
<tr>
<td>Age</td>
<td>12</td>
<td>Gender</td>
<td>Male</td>
</tr>
</table>
如果我正确理解您的要求,这就是您要寻找的:
table { width: 100% }
td:nth-child(odd) { width: 5% }
或者如果您希望内容被单元格“拥抱”:
table { width: 100% }
td:nth-child(odd) { width: 1%; white-space: nowrap }
$(function(){
$(window).load(function() {
updateCellWidth()
})
$(window).resize(function() {
updateCellWidth()
})
})
function updateCellWidth() {
var width = 0, cols = 0
$("table td:nth-child(even)").each(function(){
++cols
width += $(this).width()
})
if (cols > 0) {
var evenCellWidth=($("table").width()-width)/cols
$("table td:nth-child(even)").css("width", evenCellWidth + "px")
}
}
您是否在寻找像这样 ?
然后border-collapse
, cellspacing
和cellpadding
可能对您有所帮助。
这就是我想出的。 感谢您的想法。
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid #000;
white-space: nowrap;
}
</style>
<body>
<table id="tbl1">
<tr>
<td>Age</td>
<td>12</td>
<td>Gender</td>
<td>Male</td>
<td>Some Long Label</td>
<td>Some Long Label Value</td>
</tr>
</table>
<script type="text/javascript">
var tbl = document.getElementById('tbl1');
var rowCount = tbl.rows.length;
var colCount = tbl.rows[0].cells.length;
for (var i = 0 ; i < colCount; i++) {
if (i%2 == 0) {
tbl.rows[0].cells[i].style.width = tbl.rows[0].cells[i].innerHTML.length + 'px';
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.