网页表格在100%分辨率下被截断的修复求助
2026-8-12
问题：网页表格在100%分辨率下被截断，仅90%分辨率可正常显示
我的网页表格在浏览器100%屏幕分辨率时会被截断，无法完整显示，只有调到90%分辨率才能正常查看。希望不用每次调整分辨率就能正常浏览，尝试修复没成功，附上代码和截图说明，求技术帮助。
代码如下：
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <table class="w-100" style="height: 526px; margin-bottom: 100px"> <tr> <td> </td> <td> </td> <td style="height: 53px" colspan="3"><center><h2>PROFILE</h2></center></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td style="width: 500px"> <div class="contact-info bg-white shadow-lg"> <center><h5 class="mb-3">Your information</h5></center> <table class="w-100"> <tr> <td style="width: 35px"> <img src="icons/user.png" /> </td> <td> <br /> <p>Username</p> </td> <td></td> </tr> <tr> <td style="width: 35px"> <img src="icons/key.png" /> </td> <td> <br /> <p>Password</p> </td> <td></td> </tr> <tr> <td style="width: 35px"> <img src="icons/email.png" /> </td> <td> <br /> <p>Email</p> </td> <td></td> </tr> <tr height="20px"> <td style="width: 35px" > <img src="icons/birthdayCake.png" /> </td> <td> <br /> <p>Birth Date</p> </td> <td></td> </tr> <tr> <td></td> <td> </td> <td style="width: 35px"> <a class="custom-btn btn custom-link" href="#section_1"><img src="icons/editUser.png" /></a> </td> </tr> </table> </div> </td> <td> </td> <td style="width: 500px"> <div class="contact-info bg-white shadow-lg"> <center><h5 class="mb-3">Your recipes</h5></center> <table class="w-100"> <tr height="20px"> <td style="width: 35px; height: 20px;"> <img src="icons/recipe.png" /> </td> <td style="height: 20px"> <br /> <p>My recipe 1</p> </td> <td style="height: 20px"></td> </tr> <tr> <td style="width: 35px; height:20px"> <img src="icons/recipe.png" /> </td> <td> <br /> <p>My recipe 2</p> </td> <td></td> </tr> <tr> <td style="width: 35px"> <img src="icons/recipe.png" /> </td> <td> <br /> <p>My recipe 3</p> </td> <td></td> </tr> <tr> <td style="width: 35px"> <img src="icons/recipe.png" /> </td> <td> <br /> <p>My recipe 4</p> </td> <td></td> </tr> <tr> <td></td> <td></td> <td style="width: 35px"> <a class="custom-btn btn custom-link" href="#section_1"><img src="icons/addRecipe.png" /></a> </td> </tr> </table> </div> </td> <td> </td> <td style="width: 500px"> <div class="contact-info bg-white shadow-lg"> <center><h5 class="mb-3">Recipes you've used</h5></center> <table class="w-100"> <tr> <td style="width: 35px"> <img src="icons/recipe.png" /> </td> <td> <br /> <p>A recipe 1</p> </td> <td></td> </tr> <tr> <td style="width: 35px"> <img src="icons/recipe.png" /> </td> <td> <br /> <p>A recipe 2</p> </td> <td></td> </tr> <tr> <td style="width: 35px"> <img src="icons/recipe.png" /> </td> <td> <br /> <p>A recipe 3</p> </td> <td></td> </tr> <tr> <td style="width: 35px"> <img src="icons/recipe.png" /> </td> <td> <br /> <p>A recipe 4</p> </td> <td></td> </tr> <tr> <td></td> <td></td> <td style="width: 35px"> <a class="custom-btn btn custom-link" href="#section_1"><img src="icons/search1.png" /></a> </td> </tr> </table> </div> </td> </tr> </table> </asp:Content>
截图说明
- 100%分辨率下：表格被截断，右侧内容无法显示
- 90%分辨率下：表格完整展示，所有内容可见
解决方案
问题根源
你给三个内容列设置了固定宽度width:500px，加上列之间的空格占位符，总宽度超过了100%分辨率下的浏览器可视区域，导致表格被撑破截断。外层表格的w-100（宽度100%）属性无法约束内部固定宽度的元素。
修复方案
方案1：用弹性布局替换表格（推荐，更适配响应式）
把外层表格换成Flex布局的容器，让三个卡片自适应宽度，空间不足时自动换行：
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <!-- 标题区域 --> <div class="text-center mb-4"> <h2>PROFILE</h2> </div> <!-- 弹性布局容器 --> <div class="d-flex gap-4 justify-content-center flex-wrap" style="margin-bottom: 100px"> <!-- 个人信息卡片 --> <div class="contact-info bg-white shadow-lg" style="flex:1; min-width:280px"> <div class="text-center"><h5 class="mb-3">Your information</h5></div> <table class="w-100"> <!-- 内部表格内容保持不变 --> </table> </div> <!-- 我的食谱卡片 --> <div class="contact-info bg-white shadow-lg" style="flex:1; min-width:280px"> <div class="text-center"><h5 class="mb-3">Your recipes</h5></div> <table class="w-100"> <!-- 内部表格内容保持不变 --> </table> </div> <!-- 用过的食谱卡片 --> <div class="contact-info bg-white shadow-lg" style="flex:1; min-width:280px"> <div class="text-center"><h5 class="mb-3">Recipes you've used</h5></div> <table class="w-100"> <!-- 内部表格内容保持不变 --> </table> </div> </div> </asp:Content>
方案2：保留表格的兼容修复
如果你一定要用表格，给外层表格套一个横向滚动容器，同时移除列的固定宽度：
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <!-- 添加横向滚动容器 --> <div style="overflow-x: auto;"> <table class="w-100" style="height: 526px; margin-bottom: 100px"> <tr> <td> </td> <td> </td> <td style="height: 53px" colspan="3"><div class="text-center"><h2>PROFILE</h2></div></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <!-- 移除固定宽度width:500px --> <td> <div class="contact-info bg-white shadow-lg"> <div class="text-center"><h5 class="mb-3">Your information</h5></div> <table class="w-100"> <!-- 内部内容不变 --> </table> </div> </td> <td> </td> <!-- 移除固定宽度width:500px --> <td> <div class="contact-info bg-white shadow-lg"> <div class="text-center"><h5 class="mb-3">Your recipes</h5></div> <table class="w-100"> <!-- 内部内容不变 --> </table> </div> </td> <td> </td> <!-- 移除固定宽度width:500px --> <td> <div class="contact-info bg-white shadow-lg"> <div class="text-center"><h5 class="mb-3">Recipes you've used</h5></div> <table class="w-100"> <!-- 内部内容不变 --> </table> </div> </td> </tr> </table> </div> </asp:Content>
额外优化建议
- 不要用
控制间距，改用CSS的margin或padding，比如给列添加padding-left: 2rem来设置间距 - 废弃
<center>标签，用Bootstrap的text-center类替代，语义化和兼容性更好
内容的提问来源于stack exchange，提问作者Sgg
相关产品推荐
相关产品推荐
