如何为小于 600 的小屏幕创建响应表

Posted 2023-03-06

【中文标题】如何为小于 600 的小屏幕创建响应表

【英文标题】：How do i create a responsive table for small screen sizes less than 600

【发布时间】：2020-06-18 16:11:58

【问题描述】：

我需要帮助缩小表格的整体尺寸以适应所有屏幕尺寸，我已经涵盖了大多数尺寸，但无法缩小用于 600 或更小的移动屏幕尺寸。我主要在媒体查询中使用弹性框，但无法将尺寸缩小到 600 以内。我遗漏了一些东西，但不能指望它。 查看我的代码，请告知我缺少的内容。我很感激任何帮助。 我肯定会踢自己的..

.table 
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;


.table td 
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: black;


.table th 
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: black;


.table .index-table 
    border-color: inherit;
    text-align: center;
    vertical-align: middle


@media screen and (max-width: 767px) and (max-width: 1025px)and (max-width: 300px) 
    .table 
        overflow-x: auto;
    
    .index-table 
        width: auto !important;
    

<table class="table">
        <tr>
            <th class="index-table" colspan="15">Seattle</th>
        </tr>
        <tr>
            <td class="index-table" colspan="15">Hinged Shutter Specification</td>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="3">Louver Size</td>
            <td class="index-table" colspan="8">Width</td>
            <td class="index-table" colspan="4" rowspan="2">Height</td>
        </tr>
        <tr>
            <td class="index-table" colspan="2" rowspan="2">Min</td>
            <td class="index-table" colspan="6">Max</td>
        </tr>
        <tr>
            <td class="index-table" colspan="2">Single Hung</td>
            <td class="index-table" colspan="2">Bi-Fold</td>
            <td class="index-table" colspan="2">Multi-Fold</td>
            <td class="index-table" colspan="2">Min.</td>
            <td class="index-table" colspan="2">Max*</td>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">47mm</td>
            <td class="index-table" colspan="2" rowspan="10">152mm</td>
            <td class="index-table" colspan="2" rowspan="2">600mm</td>
            <td class="index-table" colspan="2" rowspan="10">600mm</td>
            <td class="index-table" colspan="2" rowspan="10">N/A</td>
            <td class="index-table" colspan="2" rowspan="10">250mm</td>
            <td class="index-table" colspan="2" rowspan="10">300mm</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">63mm</td>
            <td class="index-table" colspan="2" rowspan="8">750mm</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">76mm</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">89mm</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">114mm</td>
        </tr>
        <tr>
        </tr>
    </table>

【参考方案1】：

您需要做的就是让您的网站/页面适合移动设备。为此，您必须设置视口，您可以通过添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在您的html 文件中的head 标记中，一切顺利。阅读更多关于它的信息here。

【讨论】：

是的，我已经有了，表格确实缩小了，但停止了，所有其他内容都缩小了，表格的大小保持不变