表格布局适配问题求助：屏幕尺寸变化时内容比例失调

我最近碰到个头疼的问题：表格在大尺寸屏幕上显示正常，但到了笔记本这类小屏幕显示器上就彻底乱了。折腾了好几段CSS都没搞定，具体情况是这样的：

最初的尝试与问题 #

一开始我用这段CSS调整内容位置：

.page-id-309 .site-content { margin-top: -70px; position: relative; }

结果表格直接向左偏移，部分内容超出了白色的.site容器，跑到灰色页面背景上了。

尝试居中后的新问题 #

后来我想着给.site-content加上左右自动外边距来居中，改成了这段代码：

.page-id-309 .site-content { margin-top: -70px; position: relative; margin-right: auto; margin-left: auto; }

这下居中是居中了，但表格被挤得不成样子，列宽缩得很小，内容换行混乱，完全没法看。

我的现有样式与结构 #

目前我的全局容器样式是：

.site { background-color: #fff; max-width: 80%; position: relative; margin: auto; }

表格相关的HTML结构如下：

get_header(); ?> 
<div id="main-content" class="main-content"> 
<?php if ( is_front_page() && twentyfourteen_has_featured_posts() ) { 
    // Include the featured content template. 
    get_template_part( 'featured-content' ); 
} ?> 
<div id="primary" class="content-area"> 
    <div id="content" class="site-content" role="main"> 
        <section id="main_navigation" class="list"> 
        </section> 
        <div class="container"> 
            <table id="tbl" border="10"> 
                <thead> 
                    <tr> 
                        <td style="padding-left:3px">Name</td> 
                        <td style="padding-left:3px">Created By</td> 
                        <td style="padding-left:3px">Credit Cost </td> 
                        <td style="padding-left:3px">Invited <br>Candidates</td> 
                        <td style="padding-left:3px">Completed <br>Candidates</td> 
                        <td style="padding-left:3px">Added Date</td> 
                        <td colspan="3">Management</td> 
                    </tr> 
                </thead> 
                <tbody> 
                </tbody> 
            </table> 
            <br> 
            <a href="/create-project"><input type="button" value="Create a new project"/></a> 
        </div> 
    </div><!-- #content --> 
</div><!-- #primary --> 
</div><!-- #main-content -->

问题分析与解决方案 #

1. 修复容器布局的冲突 #

首先，.site已经设置了max-width:80%和margin:auto实现居中，不需要再给.site-content加margin-left/right:auto——反而会让它脱离父容器的宽度约束。我们应该让.site-content完全填充父容器的宽度，避免溢出：

.page-id-309 .site-content {
  margin-top: -70px;
  position: relative;
  width: 100%; /* 强制内容宽度继承父容器 */
  box-sizing: border-box; /* 确保内边距/边框不会额外增加宽度 */
}

2. 让表格适配小屏幕 #

表格本身是固定宽度的，小屏幕下宽度不够就会溢出或挤压。最实用的解决方法是给表格容器添加横向滚动：

.container {
  overflow-x: auto; /* 小屏幕下允许横向滚动表格 */
  padding: 0 10px; /* 加一点内边距，避免表格贴边 */
}

同时优化表格样式，让它更规整：

#tbl {
  width: 100%; /* 让表格填充容器宽度 */
  border-collapse: collapse; /* 合并边框，视觉更整洁 */
}
#tbl td {
  min-width: 100px; /* 设置列的最小宽度，防止过度挤压 */
  padding: 3px; /* 把内联样式移到CSS里，方便统一维护 */
}

3. 排查定位层级问题 #

因为.site和.site-content都用了position:relative，如果负margin-top导致内容向上超出.site容器，可以给.site加一点顶部内边距，或者调整负margin的数值，确保内容不会跑到容器外面：

.site {
  padding-top: 20px; /* 给顶部留点空间，避免内容被截掉 */
}

按照这个思路调整后，小屏幕上的表格应该就能正常适配了，既不会溢出容器，也不会被挤得变形。

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