html表列宽度，在创建页面时固定宽度

Question

If there an easy way to fix the width of the html table columns at the time the page is rendered. 如果在呈现页面时有一种简单的方法可以固定html表列的宽度。 I DO NOT want to specify the pixel or percent width of the columns in my code. 我不想在代码中指定列的像素或百分比宽度。 However, once the page is created and the widths determined based on the initial content in the table I do not want the widths to change, even if the size of the cell content changes. 但是，一旦创建了页面并根据表中的初始内容确定了宽度，即使单元格内容的大小发生了变化，我也不想改变宽度。

Just so you understand what i'm trying to do, if I have the content of a cell change(from normal to bold for example), say when I hover over the row, the size of the columns will change. 只是让您了解我要做什么，如果我有一个单元格更改的内容（例如，从普通更改为粗体），例如说当我将鼠标悬停在行上时，列的大小就会更改。 This looks quite odd. 这看起来很奇怪。

Answer 1

To be honest I didn't understand the answer you gave to my comment, but I'll attempt at an answer anyway :-) 老实说，我不明白您对我的评论的回答，但无论如何我都会尝试回答:-)

What you maybe need is to wrap the content of each cell in a div (or some other block element) and set it's width. 您可能需要的是将每个单元格的内容包装在div （或某些其他块元素）中并设置其宽度。 That should limit the widening of the cells, however as I hinted at im my comment, the wider content will overflow, which most like look ugly. 那应该限制了单元格的扩大，但是，正如我在即时消息中暗示的那样，更宽泛的内容将溢出，这看起来很丑陋。 However you didn't really specify what you want the wider content to do... 但是，您并没有真正指定您想要更广泛的内容做什么...

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

Live example: http://jsfiddle.net/Vx5Zq/ 实时示例： http ： //jsfiddle.net/Vx5Zq/

Notice how the letter F is cut off on hover. 请注意，如何在悬停时截断字母F。

Answer 2

I think this should do the trick (not checked though): 我认为这应该可以解决问题（虽然未选中）：

var w = $('#myTable td.leftCol').outerWidth();
$('#myTable td.leftCol').css({width: w+'px'});

[EDIT] [编辑]

<!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

Adding some width to your current tds will stop the resizing when the the text goes bold. 当文本变为粗体时，为当前tds添加一些宽度将停止调整大小。

First set your table using css to fixed rendering: 首先使用CSS将表格设置为固定渲染：

<style type="text/css">
    #mytable{ table-layout: fixed; }
</style>

Then you can use jquery to add 2px of width to your tds like so: 然后，您可以使用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 个解决方案

解决方案1
1 已采纳 2010-12-08 09:32:14

解决方案2
0 2010-12-06 11:44:27

解决方案3
0 2010-12-06 16:04:33

html表列宽度，在创建页面时固定宽度

问题描述

3 个解决方案

解决方案1 1 已采纳 2010-12-08 09:32:14

解决方案2 0 2010-12-06 11:44:27

解决方案3 0 2010-12-06 16:04:33

解决方案1
1 已采纳 2010-12-08 09:32:14

解决方案2
0 2010-12-06 11:44:27

解决方案3
0 2010-12-06 16:04:33