html表列宽度，在创建页面时固定宽度
[英]html table column width, fix width at time of page creation
问题描述
如果在呈现页面时有一种简单的方法可以固定html表列的宽度。 我不想在代码中指定列的像素或百分比宽度。 但是，一旦创建了页面并根据表中的初始内容确定了宽度，即使单元格内容的大小发生了变化，我也不想改变宽度。
只是让您了解我要做什么，如果我有一个单元格更改的内容（例如，从普通更改为粗体），例如说当我将鼠标悬停在行上时，列的大小就会更改。 这看起来很奇怪。
3 个解决方案
解决方案1
1 已采纳 2010-12-08 09:32:14
老实说，我不明白您对我的评论的回答，但无论如何我都会尝试回答:-)
您可能需要的是将每个单元格的内容包装在div （或某些其他块元素）中并设置其宽度。 那应该限制了单元格的扩大，但是，正如我在即时消息中暗示的那样，更宽泛的内容将溢出，这看起来很丑陋。 但是，您并没有真正指定您想要更广泛的内容做什么...
<style type="text/css">
#the-table td .wrap {
overflow: hidden; /* try different values for different effects */
}
</style>
<script type="text/javascript">
$(function(){
$('#the-table th, #the-table td').wrapInner(function() {
return $("<div/>").css("width", $(this).width() + "px");
});
});
</script>
实时示例： http ： //jsfiddle.net/Vx5Zq/
请注意，如何在悬停时截断字母F。
解决方案2
0 2010-12-06 11:44:27
我认为这应该可以解决问题（虽然未选中）：
var w = $('#myTable td.leftCol').outerWidth();
$('#myTable td.leftCol').css({width: w+'px'});
[编辑]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("table td").each(
function() {
var w = $(this).outerWidth();
alert(w+'px');
w *= 2;
$(this).css({width: w+'px'});
alert(w+'px');
}
);
}
);
</script>
</head>
<body>
<table>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
</table>
</body>
</html>
解决方案3
0 2010-12-06 16:04:33
当文本变为粗体时，为当前tds添加一些宽度将停止调整大小。
首先使用CSS将表格设置为固定渲染：
<style type="text/css">
#mytable{ table-layout: fixed; }
</style>
然后，您可以使用jquery向tds添加2px的宽度，如下所示：
<script type="text/javascript">
$(function(){
$('#mytable td').each(function(){
var $this = $(this) // cache this td
// set style to 2px wider
$this.css({ width: $this.outerWidth() + 2, height: $this.outerHeight() + 2 });
})
});
</script>
如何修复html 5中的表格宽度？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.