使用display:flex布局时移动端表格padding消失的解决方法

我正在制作一个包含logo和表格的页面，采用display:flex作为容器布局。但在移动端适配时，表格的padding消失了，请问该如何修复？

效果对比 #

• 正常显示效果：
  
• 期望实现效果：
  
• 当前代码实现效果：
  

当前代码 #

CSS代码 #

.wrapper
{
    min-height: 100%;
    overflow: hidden;
}

._container
{
    max-width: 1310px;
    margin: 0px auto;
    padding: 0px 45px;
    box-sizing: content-box;
}

.main_section{
    width: 100%;
    display: flex;
}

.table_text table{
    width: 100%;
    display: block;
}

.table_text tbody, 
.table_text th{
    width: 100%;
    display: block;
}

.table_text tbody{
    overflow-x: auto;
}

.table_text tbody tr{
    width: 100%;
    display: table-cell;
}

.table_text td{
    width: 100%;
    display: block;
}

.table__container {
    padding: 0px;
}

.yacheika td{
    padding: 34px 25px;
}
.yacheika th{
    padding: 34px 25px;
    text-align: left;
}

.title {
    text-align: center;
    padding-bottom: 40px;
}

HTML代码 #

<div class="wrapper _container">
    <div class="main_section ">
        <div class="header__container ">
            <img src="logo.svg" alt="logo" class="header_img">
        </div>
        <div class="table__container">
            <div class="title">Table name</div>
            <div class="table_text">
                <table>
                    <tr>
                        <th>header</th>
                        <th>header</th>
                        <th>header</th>
                        <th>header</th>
                        <th>header</th>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

问题根源 #

1. HTML中的<table>未添加yacheika类，导致定义好的padding样式无法作用到单元格
2. 对表格核心元素（table/tbody/tr/th/td）强制设置display:block等非原生表格布局属性，破坏了表格的默认渲染机制，即使样式关联上也无法正常生效

具体修复步骤 #

1. 关联样式类名：给HTML中的<table>标签添加yacheika类，让padding样式正确绑定到单元格：

<table class="yacheika">

2. 重构响应式表格布局：放弃修改表格原生display属性的错误做法，改用标准响应式方案：

   • 移除以下错误CSS规则：

     .table_text table{ display: block; }
     .table_text tbody, .table_text th{ display: block; }
     .table_text tbody tr{ display: table-cell; }
     .table_text td{ display: block; }
     

   • 替换为安全的滚动容器设置：

     .table_text {
         overflow-x: auto;
     }
     .table_text table{
         width: 100%;
         min-width: 600px; /* 可选，确保小屏幕触发横向滚动 */
     }
     

3. 优化Flex容器移动端表现：添加媒体查询，让小屏幕下logo和表格垂直排列：

@media (max-width: 768px) {
    .main_section {
        flex-direction: column;
        gap: 20px;
    }
}

修复后，表格的padding会在移动端正常显示，同时保持横向滚动的响应式特性，匹配期望效果。

内容的提问来源于stack exchange，提问作者Sherlock_201