如何使用css增加表格单元格的宽度？ [复制]答案

【问题标题】：How to increase the width of table cell using css? [duplicate]如何使用css增加表格单元格的宽度？ [复制]
【发布时间】：2016-02-21 03:55:51
【问题描述】：

下面是嵌入css代码的html，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Embedded style</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1 style="max-width:66%;margin:auto;text-align:center;">2008 OFFICERS</h1>
        <br><br><br><br>
        <!-- Tables are surrounded with table tags -->
        <table style="border: 1px solid black;margin:auto;max-width:33%">
            <!-- thead shows at the top of the table and must come before tbody -->
            <thead style="max-width:100%">
                <tr>
                    <td colspan="3" style="font-weight:bold;text-align:center;border:1px solid black;">Current Officers</td>
                </tr>
            </thead>
            <!-- The main data for the table goes between tbody if you use thead or tfoot -->
            <tbody style="max-width:100%">
                <tr style="max-width:100%">
                    <td style="border: 1px solid black;">President</td>
                    <td style="border: 1px solid black;">Jesse Blair</td>
                    <td style="border: 1px solid black;">555-7189</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;max-width:30%">Vice-President</td>
                    <td style="border: 1px solid black;">Frank Smythe</td>
                    <td style="border: 1px solid black;">505-555-3576</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">Secretary</td>
                    <td style="border: 1px solid black;">Jean Darr</td>
                    <td style="border: 1px solid black;">555-5415</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">Treasurer</td>
                    <td style="border: 1px solid black;">Linda Carter</td>
                    <td style="border: 1px solid black;">555-9653</td>
                </tr>
            </tbody>
        </table>

        <br><br>

        <!-- Tables are surrounded with table tags -->
        <table style="border: 1px solid black;margin:auto;">
            <!-- thead shows at the top of the table and must come before tbody -->
            <thead>
                <tr>
                    <td colspan="2" style="font-weight:bold;text-align:center;border:1px solid black;">Board Members at Large</td>
                </tr>
            </thead>
            <!-- The main data for the table goes between tbody if you use thead or tfoot -->
            <tbody>
                <tr>
                    <td style="border: 1px solid black;">Dick Wilson</td>
                    <td style="border: 1px solid black;">555-1982</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">Jan-Davis</td>
                    <td style="border: 1px solid black;">555-3530</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

我正在使用带有百分比值的max-width 进行响应式设计。

我想进一步对任何代码使用 css 属性。

如何增加表格单元格的宽度？

注意：内联 css 是有意作为练习的一部分

【问题讨论】：

我的意思是，在这里使用max-width 属性看起来毫无意义，因为如果将其指定为百分比，那么它将占用包含块宽度的百分比。在这里，您没有为任何元素指定 width 属性，但您使用的是 max-width 属性？
好吧，这么说吧，用<table style="border: 1px solid black;margin:auto;width:33%">代替<table style="border: 1px solid black;margin:auto;max-width:33%">怎么样？这不是你要找的吗？
还有stackoverflow.com/questions/4457506/…和stackoverflow.com/questions/928849/setting-table-column-width和stackoverflow.com/questions/11090544/td-widths-not-working

标签： html css

【解决方案1】：

顾名思义，max-width 属性描述了它所应用的元素可以具有的最大宽度。如果要更改元素的宽度，只需使用 width。

【讨论】：

【解决方案2】：

您已将表格宽度设置为 33% ，我认为这会导致所有问题将其删除，并将宽度设置为 td 的百分比。

<td width="35%"   style="border: 1px solid black;">President</td>
<td width="30%"   style="border: 1px solid black;">Jesse Blair</td>
<td width="35%" style="border: 1px solid black;">555-7189</td>

根据您的要求设置宽度或使用 css 类设置并在代码中使用。

【讨论】：

屏幕大小调整怎么样？使用width 属性时，水平滚动条在哪里出现？
据我所知，如果您调整车身尺寸，那么表格也会随之调整，因此如果我们以百分比形式给出 td 宽度，那么它也会根据车身尺寸发生变化和调整。跨度>