如何让HTML表格内的响应式时间轴在移动端正常显示？

当前问题：移动端小屏幕下，表格内的时间轴出现布局错乱，圆点位置偏移、内容挤压，核心原因是原媒体查询的样式未适配表格单元格的有限宽度，且表格默认行为会挤压内部元素。

具体优化步骤： #

1. 给表格添加响应式容器
   避免表格内容在小屏幕被过度挤压，添加横向滚动容器：

   @media (max-width: 700px) {
     .table-responsive {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
     }
   }
   

   修改HTML结构，将表格包裹在容器内：

   <div class="table-responsive">
     <table class="table table-striped">
       <!-- 原表格内容 -->
     </table>
   </div>
   

2. 重写时间轴移动端样式
   调整布局逻辑，适配小屏幕空间：

   @media (max-width: 700px) {
     .timeline {
       list-style-type: none;
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
       padding-left: 0;
     }
   
     .li {
       transition: all 200ms ease-in;
       display: flex;
       flex-direction: column;
       align-items: center;
       flex: 1 1 calc(33.33% - 1rem);
       min-width: 120px;
     }
   
     .timestamp {
       margin-bottom: 10px;
       padding: 0 10px;
       text-align: center;
       width: auto;
     }
   
     .point {
       padding: 0;
       border-top: 2px solid #D6DCE0;
       position: relative;
       padding-top: 1.5em;
       width: 100%;
       justify-content: center;
     }
   
     .point:before {
       left: 50%;
       top: -13px;
       transform: translateX(-50%);
     }
   }
   

3. 优化文本适配
   调整字体大小和换行规则，避免内容溢出：

   .timestamp span {
     word-wrap: break-word;
     font-size: 0.9rem;
   }
   
   .point h5 {
     font-size: 0.9rem;
     margin: 0;
   }
   

效果说明 #

• 表格在移动端支持横向滚动，为时间轴保留足够展示空间
• 时间轴项自动换行，保持每行3个的紧凑布局，内容垂直对齐
• 圆点通过transform: translateX(-50%)精准居中，解决偏移问题
• 缩小字体、调整内边距，避免内容挤压重叠

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