Cum pot face ca un tabel bulma să fie receptiv? (Programare, Css, Tabel Html, Responsive, Bulma)

Anonim a intrebat.
a intrebat.

Folosesc cadrul Bulma CSS și mai exact încerc să fac tabelul din el responsive.

Am încercat să îi dau un width: 100%; și aplicând overflow-x: auto; dar nu pare să funcționeze. Aici este demo-ul: http://104.236.64.172:8081/#/pricing

Cod:

<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 relevant:

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

Comentarii

  • Nu reușesc să reproduc problema, așa cum este descrisă. –  > Por Daedalus.
  • Uitați-vă doar la demo. Problema este acolo. –  > Por Anonim.
3 răspunsuri
sol

Ați putea să înfășurați tabelul într-un container și să aplicați overflow acolo.

De asemenea, puteți utiliza funcția is-fullwidth pe table, în loc să declarați width în CSS.

Fiddle

Actualizați conform comentariului

În cazul tău, trebuie să adaugi și atributul width la .pricing

actualizat fiddle

Comentarii

  • Hei, mulțumesc. Există o problemă atunci când aplic această soluție pe site-ul web în curs de execuție aici: 104.236.64.172:8081/#/pricing Poate că are legătură cu flexbox sau cu faptul că folosesc un tabel în interiorul unui panel-block de bulină. Nu pare să funcționeze. Mă puteți ajuta să depanez? Doar aplicați aceste modificări pe site-ul live folosind chrome inspector și vedeți cu ochii voștri. –  > Por Anonim.
  • Sunteți capabil să modificați marcajul? Încercați să înfășurați tabelul în propriul său div ca în fragmentul de text. –  > Por sol.
  • Am făcut-o. Puteți verifica singur. În inspector. Doar faceți clic dreapta pe <table> nod și Edit as HTML. Apoi înfășurați tabelul într-un div. –  > Por Anonim.
  • Nu știam că se poate edita HTML-ul în acest fel… învață ceva nou în fiecare zi! Am reușit să funcționeze prin eliminarea flex de pe panel-block. Cred că va trebui să îți restructurezi HTML-ul. Ar fi mai ușor de ajutat dacă ați edita întrebarea dvs. cu HTML și CSS relevante, mulțumesc –  > Por sol.
  • Minunat, mă bucur că v-a ajutat –  > Por sol.
LaundroMat

Am găsit un alternativă excelentă care transformă elementele orizontale în elemente verticale:

@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";}
}

Dacă nu aveți nevoie de anteturi, eliminați elementele td:before modificatorii.

Comentarii

  • Acest lucru este minunat! –  > Por Suvin Nimnaka Sukka.
Naskalin

utilizare .table-container în div părinte:

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

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

Comentarii

  • Corect, doar nu înfășurați .table-container într-un div columns nici column class –  > Por Luis Cabrera Benito.