如何使bulma表具有响应性？

Question

我正在使用Bulma CSS框架，特别是我正在尝试使其中的表具有响应性。

我尝试给它一个width: 100%;并申请，overflow-x: auto;但似乎没有用。这是演示：http : //104.236.64.172 : 8081/#/pricing

码：

<div class="panel-block">
    <table class="table is-bordered pricing__table">
        <thead>
            <tr>
                <th>Travellers</th>
                <th>Standard</th>
                <th>Delux</th>
                <th>Premium</th>
                <th>Luxury</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Per Person Cost</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr>
            <tr>
                <td>
                    Extra Person <br>
                    (> 12 yrs)
                </td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr>
            <tr>
                <td>
                    Extra Child <br>
                    (> 12 yrs)
                </td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr>
            <tr>
                <td>Total Cost</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr>
        </tbody>
    </table>
</div>

相关CSS：

.pricing__table {
    width: 100%;
    overflow-x: auto;
}

Answer 1

您可以将表包装在容器中，然后在其中应用overflow属性。

另外，您可以在is-fullwidth上使用修饰符table，而不是width在CSS 中声明。

小提琴

.table__wrapper {
  overflow-x: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet" />
<div class="table__wrapper">
  <table class="table is-bordered pricing__table is-fullwidth">
    <tbody>
      <tr>
        <td>Per Person Cost</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
      </tr>
      <tr>
        <td>
          Extra Person <br> (> 12 yrs)
        </td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
      </tr>
      <tr>
        <td>
          Extra Child <br> (> 12 yrs)
        </td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
      </tr>
      <tr>
        <td>Total Cost</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
        <td>? 70,523.90</td>
      </tr>
    </tbody>
  </table>
</div>

根据评论更新

对于您的情况，还需要将该width属性添加到.pricing

更新的小提琴

.table__wrapper {
  overflow-x: auto;
}

.pricing {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<div class="panel">
  <div class="panel-block">
    <div class="pricing">
      <div class="table__wrapper">
        <table class="table is-bordered pricing__table is-fullwidth">
          <tbody>
            <tr>
              <td>Per Person Cost</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
            </tr>
            <tr>
              <td>
                Extra Person
                <br> (> 12 yrs)
              </td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
            </tr>
            <tr>
              <td>
                Extra Child
                <br> (> 12 yrs)
              </td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
            </tr>
            <tr>
              <td>Total Cost</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
              <td>? 70,523.90</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 2

.table-container在父 div 中使用：

<div class="table-container">
  <table class="table">
    <!-- Your table content -->
  </table>
</div>

https://bulma.io/documentation/elements/table/#table-container