表格需自适应全屏/并排，添加display:inline-block后布局异常，求原因

咱们先拆解你遇到的问题根源，再一步步给出可行的解决办法：

为什么设置display:inline-block后会出现布局问题？ #

核心有三个关键原因：

• inline-block的默认空白间距：浏览器会把inline-block元素之间的换行、空格解析成空白字符，这会让表格之间多出几像素的额外间距。当屏幕宽度刚好接近两个表格的总宽度时，这个间距会直接导致第二个表格换行，达不到你想要的并排效果。
• 边框导致的宽度溢出：你的表格和单元格都设置了边框，但没有开启box-sizing:border-box，这意味着边框宽度会额外增加元素的总宽度——原本设置的width:100%和max-width:300px会被边框“撑开”，进一步挤压可用空间，加剧布局错乱。
• inline-block无法自动填充父容器：当屏幕变窄时，inline-block元素不会像block元素一样自动占满父容器宽度，依然会保持自身的宽度设置，达不到你要的“窄屏占满”需求。

最优解决方案：使用Flexbox布局（推荐） #

Flexbox完美解决了inline-block的各种痛点，能轻松实现响应式的并排/换行布局，代码也更简洁易维护：

修改后的CSS：

/* 给表格的父容器添加Flex布局 */
.table-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 可选：自定义表格之间的间距，替代默认空白字符 */
}

.custom-table {
  width: 100%;
  border: 5px solid black;
  text-align: center;
  border-collapse: collapse;
  max-width: 300px;
  box-sizing: border-box; /* 让边框包含在宽度内，避免溢出 */
  flex: 1 1 300px; /* 关键规则：窄屏时自动占满，宽屏时保持最小300px宽度并排 */
}

.right-column { width: 20%; border: 3px solid lightblue; box-sizing: border-box; }
.middle-column { width: 40%; border: 3px solid lightblue; box-sizing: border-box; }
.left-column { width: 40%; border: 3px solid lightblue; box-sizing: border-box; }

修改后的HTML：

<div class="table-container">
  <table class="custom-table" dir="rtl">
   <tr class="custom-row">
   <td class="custom-column right-column"> 777 </td>
   <td class="custom-column middle-column"> 888 </td>
   <td class="custom-column left-column"> 999 </td>
   </tr>
  </table>
  <table class="custom-table" dir="rtl">
   <tr class="custom-row">
   <td class="custom-column right-column"> 777 </td>
   <td class="custom-column middle-column"> 888 </td>
   <td class="custom-column left-column"> 999 </td>
   </tr>
  </table>
</div>

如果坚持使用inline-block的修复方案 #

如果你不想切换到Flexbox，也可以针对问题逐个修复：

1. 移除inline-block元素间的空白：把两个表格标签写在同一行，或者用注释消除换行：

   <table class="custom-table" dir="rtl">...</table><!--
   --><table class="custom-table" dir="rtl">...</table>
   

2. 开启box-sizing:border-box：给所有带边框的元素添加这个属性，避免宽度溢出。
3. 用媒体查询处理窄屏情况：当屏幕宽度不足以容纳两个表格时，强制表格占满宽度：

   @media (max-width: 620px) {
     .custom-table {
       width: 100%;
       display: block; /* 切换回block，确保占满父容器宽度 */
     }
   }
   

额外说明 #

dir="rtl"会让表格的列从右往左排列，但这不影响上述布局逻辑，两种方案都能完美兼容RTL布局。

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