HTML：当表位于具有固定宽度的div内时，如何增加表列的宽度

The following piece of HTML code creates a table inside a div of fixed width. It seems that the "th,td" width is inherited from the parent div (but the W3 documentation says that it is not a inherited property!).

下面的HTML代码在固定宽度的div内创建一个表。似乎“th,td”宽度是从父div继承的(但是W3文档说它不是继承的属性!)。

How do I increase the width of table columns (say 500px)?

如何增加表格列的宽度(比如500px)?

You can see that changing the width value in "th, td" selector does not have any impact on width.

您可以看到更改“th,td”选择器中的宽度值对宽度没有任何影响。

Please note:
- I do not want to change the width of div
- I do not want to set a fixed width to my table
- I have tried "table-layout: fixed;" inside table selector. It did not make the "td,th" width property work.

请注意: - 我不想改变div的宽度 - 我不想为我的表设置固定宽度 - 我试过“table-layout:fixed;”内部表选择器。它没有使“td,th”宽度属性起作用。

<!DOCTYPE html>
<html>

    <head>
        <style>
            table {
                border-collapse:collapse;
            }
            table, td, th {
                border:1px solid black;
            }
            th, td {
                /* Changing width doesn't make any difference */
                width:500px;
            }
            .myclass {
                width:200px;
                overflow:auto
            }
        </style>
    </head>

    <body>
        <div class="myclass">
            <table>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Savings</th>
                    <th>Expenditure</th>
                </tr>
                <tr>
                    <td>Peter</td>
                    <td>Griffin</td>
                    <td>$100</td>
                    <td>$50</td>
                </tr>
            </table>
        </div>
    </body>

</html>

2 个解决方案

#1

Why not use percentages?

为什么不使用百分比?

jsfiddle: http://jsfiddle.net/qCYDq/

also you are limiting yourself with 200px in width, if the text inside the table (word width) is larger than your 200px it will force its width and then cause your scroller to appear as the table will stretch to fit the words.

你也限制自己200px的宽度,如果表格内的文字(字宽)大于你的200px它将强制它的宽度然后导致你的卷轴出现,因为表将拉伸以适应单词。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse:collapse;
    width: 100%;
    font-size: 9px;
}
td,th { 
    border:1px solid black;
    width: 25%;
}
.myclass
{
    width:200px;
    overflow:auto
}
</style>
</head>
<body>    
<div class="myclass">
    <table>
        <tr>
           <th>Firstname</th>
           <th>Lastname</th>
           <th>Savings</th>
           <th>Expenditure</th>
        </tr>
        <tr>
           <td>Peter</td>
           <td>Griffin</td>
           <td>$100</td>
           <td>$50</td>
        </tr>
    </table>
</div>
</body>
</html>

#2

Finally, made it work!

最后,让它工作!

"table-layout:fixed; width:100%" did the trick...

“表格布局:固定;宽度:100%”诀窍......

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse:collapse;
        }
        table, td, th {
            border:1px solid black;
        }
        th, td {
            /* Changing width doesn't make any difference */
            width:500px;
        }
        .myclass {
            width:200px;
            overflow:auto
        }
    </style>
</head>

<body>
    <div class="myclass">
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
                <th>Expenditure</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
                <td>$50</td>
            </tr>
        </table>
    </div>
</body>

</html>

#1