web-dev-qa-db-ja.com

ブルマテーブルをレスポンシブにするにはどうすればよいですか？

私は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;
}
csshtml-tableresponsivebulma
8
Anonymous

テーブルをコンテナにラップし、代わりにoverflowプロパティをそこで適用できます。

また、CSSでtableを宣言する代わりに、widthでis-fullwidth修飾子を使用できます。

フィドル

.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>
9
sol

水平要素を垂直要素に変換する 素晴らしい代替案 を見つけました：

@media
only screen and (max-width: 1500px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 200px;
    margin-left: 150px;
  }
  td:before {
    position: absolute;
    top: 12px;
    left: 6px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
  td:nth-of-type(1):before { content: "Option"; }
  td:nth-of-type(2):before { content: "Description"; }
  td:nth-of-type(3):before { content: "Type"; }
  td:nth-of-type(4):before { content: "Default";}
}

ヘッダーが不要な場合は、td:before修飾子。

2
LaundroMat

使用する .table-container親div内：

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

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

1
Naskalin