Question

下面是嵌入了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有意成为练习的一部分

Answer 1

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

Answer 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类设置并在代码中使用。

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

2 个答案: