Question

我有一个HTML表，它有相同的行和列。我希望每个单元格具有固定的大小，例如40px宽度和30px高度。当我更改浏览器窗口的大小时，单元格大小也会更改。我该怎样预防呢？如果浏览器的窗口变得太小，我希望看到滚动条。以像素为单位设置单元格的高度和宽度是否正确？谢谢！

Answer 1

您必须指定表格的大小，以防止其被调整为适合页面。

如果指定的单元格大小只是最小大小，那么如果表格较大，它们会变大。此外，如果您已指定所有单元格的大小，并且该表格小于单元格大小的总和，则单元格必须小于指定的大小。

Answer 2

确保您在像素中分配width和height，而不是为表格及其单元格和行分配百分比。

Answer 3

它在9X9 tic tac toe中与我合作

https://codepen.io/abHafez/pen/WZaeXW

我只是为表格本身和<td>元素指定了高度和宽度。

table {
    table-layout:fixed;
    width: 350px;
    height: 350px;
    font-size: 4rem;
}

tr {
    max-height: 15px;
}

td {
    background-color: #78c0c4;
    border: white solid 1rem;
    text-align: center;
    /* position: relative; */
    width: 114px;
    height: 114px;
}

         <table>
                <tr class="row1">
                    <td class="pos1"></td>
                    <td class="pos2"></td>
                    <td class="pos3"></td>
                </tr>
                <tr class="row2">
                    <td class="pos4"></td>
                    <td class="pos5"></td>
                    <td class="pos6"></td>
                </tr>
                <tr class="row3">
                    <td class="pos7"></td>
                    <td class="pos8"></td>
                    <td class="pos9"></td>
                </tr>
            </table>

具有固定单元格大小的HTML表

3 个答案: