html - 表格在 Wordpress 的移动设备中超出屏幕

Question

我正在使用主题制作一个 WordPress 网站。

Page with Pricing Table - open in Mobile device to Check mobile Device Layout

我在其中放了一个超出该部分的价格表。

您可以在下面看到最后一列是如何超出屏幕的。

table {
  border: 3px solid;
}

<table style="">
  <tbody>
    <tr>
      <th style="text-align: center;">Area</th>
      <th style="text-align: center;">Single</th>
      <th style="text-align: center;">5 Session (6
        <sup>th</sup>Free)</th>
    </tr>
    <tr>
      <td style="text-align: left;">Full Face (exc. Neck)</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£95</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£450</strong></span>
      </td>
    </tr>
    <tr>
      <td style="text-align: left;">Full Face (inc. Neck)</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£145</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£700</strong></span>
      </td>
    </tr>
    <tr>
      <td>Half Face</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£75</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£350</strong></span>
      </td>
    </tr>
    <tr>
      <td>Full Neck</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£60</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£275</strong></span>
      </td>
    </tr>
    <tr>
      <td>Chin/Jawline/Sides</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£45</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£200</strong></span>
      </td>
    </tr>
    <tr>
      <td>Upper Lip</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£40</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£175</strong></span>
      </td>
    </tr>
    <tr>
      <td>Upper Lip &amp; Chin</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£75</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£350</strong></span>
      </td>
    </tr>
    <tr>
      <td>Center Brow</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£20</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£90</strong></span>
      </td>
    </tr>
    <tr>
      <td>Nose</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£20</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£90</strong></span>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

在你的 styles.css 第 1561 行你有这个:

.wpb_content_element table, .vacancy_table, .wp_content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

您需要将 table-layout:fixed 添加到该规则声明中。

.wpb_content_element table, .vacancy_table, .wp_content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed
}