移动端博客表格过宽问题求助（使用内联CSS）

Hey there! 我完全理解你的处境——只能用内联CSS，还得搞定移动端适配，确实有点棘手。针对你这个酒店评级表格的问题，我给你几个纯内联/局部样式的解决方案，保证不影响全站，而且能完美适配移动端：

核心思路：横向滚动容器 + 单元格样式优化 #

移动端表格过宽的本质是列数太多，超出屏幕宽度。最稳妥的解决办法是给表格套一个横向滚动容器，再微调单元格的 padding 和字体大小，让移动端体验更友好。

修改后的完整代码示例 #

我直接把你的代码修改好了，你可以直接替换：

<details style="font-size: 20px; font-weight: 500; padding: 20px; background-color: white; border: 1px solid black;">
  <summary>Tabelle zur Hotelklassifizierung durch hotelstars.eu im textilen Bereich - für volle Ansicht klicken!</summary>
  <br /><br />
  <span>Leeres Feld = freiwillig, <i class="fa fa-dot-circle" style="color: #006666;"></i> = Mindestanforderung</span>
  <br /><br />
  <!-- 新增横向滚动容器，内联样式确保移动端可滚动 -->
  <div style="overflow-x: auto; max-width: 100%;">
    <table class="blogtable" style="width: 100%; border-collapse: collapse;">
      <tbody>
        <tr>
          <th style="width: 50%; padding: 8px 12px; text-align: left; background-color: #f5f5f5;">Kriterium</th>
          <th style="padding: 8px 12px; text-align: center;">Punkte</th>
          <th style="padding: 8px 12px; text-align: center;"><i class="fa fa-star"></i></th>
          <th style="padding: 8px 12px; text-align: center;"><i class="fa fa-star"></i><i class="fa fa-star"></i></th>
          <th style="padding: 8px 12px; text-align: center;"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></th>
          <th style="padding: 8px 12px; text-align: center;"><i class="fa fa-star"></i><br /><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></th>
          <th style="padding: 8px 12px; text-align: center;"><i class="fa fa-star"></i><i class="fa fa-star"></i><br /><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></th>
        </tr>
        <tr>
          <td style="padding: 8px 12px; border-top: 1px solid #eee;">Täglicher Handtuchwechsel auf Wunsch</td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;">1</td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;"><i class="fa fa-dot-circle"></i></td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;"><i class="fa fa-dot-circle"></i></td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;"><i class="fa fa-dot-circle"></i></td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;"><i class="fa fa-dot-circle"></i></td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;"><i class="fa fa-dot-circle"></i></td>
        </tr>
        <tr>
          <td style="padding: 8px 12px; border-top: 1px solid #eee;">Bettwäschewechsel mind. einmal pro Woche</td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;">1</td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;"><i class="fa fa-dot-circle"></i></td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;"><i class="fa fa-dot-circle"></i></td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;"><i class="fa fa-dot-circle"></i></td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;">&nbsp;</td>
          <td style="padding: 8px 12px; text-align: center; border-top: 1px solid #eee;">&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- 局部媒体查询，仅作用于当前表格，不影响全站 -->
  <style>
    @media (max-width: 768px) {
      /* 移动端缩小字体，减少空间占用 */
      .blogtable th, .blogtable td {
        font-size: 14px;
        padding: 6px 8px !important;
      }
      /* 把4星、5星的多行星星改成单行，节省纵向空间 */
      .blogtable th:nth-child(6) br, .blogtable th:nth-child(7) br {
        display: none;
      }
    }
  </style>
</details>

关键修改点说明 #

• 横向滚动容器：给表格套了一个<div>，内联样式overflow-x: auto; max-width:100%;，当屏幕宽度不足时，表格会自动出现横向滚动条，不会撑破页面。
• 单元格样式优化：统一设置了padding:8px 12px，比默认 padding 更紧凑，同时给表头加了浅灰色背景，增强可读性。
• 移动端局部媒体查询：在<details>内部加了一个<style>标签，里面的媒体查询只作用于这个表格（通过.blogtable类），不会影响全站内容。主要做了两件事：
  1. 缩小移动端的字体和 padding，进一步节省空间。
  2. 隐藏4星、5星表头里的换行符，把多行星星改成单行，减少纵向高度。

为什么这样可行？ #

因为你不能修改全局样式表，这个方案里的<style>标签是嵌套在<details>内部的，只会作用于当前表格，不会影响网站其他部分，IT部门应该不会有意见。而且所有核心样式都是内联或者局部的，完全符合你的限制条件。

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