css表格设置不同宽度,使表格内容适合宽度与表格宽度：100％在css中设置

4 个答案:

答案 0 :(得分：3)

可能colgroup可以帮助你。试试this

HTML是：

Age

12

Gender

Male

答案 1 :(得分：2)

如果我理解正确，这就是你要找的东西：

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")

}

}

答案 2 :(得分：0)

您是否正在寻找类似this的内容。？

然后border-collapse，cellspacing＆amp; cellpadding可能会对您有所帮助。

答案 3 :(得分：0)

这就是我想出的。谢谢你的想法。

table {

border-collapse: collapse;

width: 100%;

}

table td {

border: 1px solid #000;

white-space: nowrap;

}

Age

12

Gender

Male

Some Long Label

Some Long Label Value

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';

}

}