Question

如果在呈现页面时有一种简单的方法来修复html表列的宽度。我不想在代码中指定列的像素或百分比宽度。但是，一旦创建页面并根据表格中的初始内容确定宽度，我不希望宽度发生变化，即使单元格内容的大小发生变化。

只是让你明白我想要做什么，如果我有单元格更改的内容（例如从正常到粗体），比如当我将鼠标悬停在行上时，列的大小将会改变。这看起来很奇怪。

Answer 1

说实话，我不明白你给我评论的答案，但无论如何我都会尝试答案： - ）

您可能需要将每个单元格的内容包装在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是如何切断的。

Answer 2

我认为这应该可以解决问题（虽然没有检查过）：

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>

Answer 3

在当前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表列宽，修复页面创建时的宽度

3 个答案: