Ukuran kolom tabel

Question 1

Di Bootstrap 3, saya bisa menerapkan col-sm-xxke thtag di theaddan mengubah ukuran kolom tabel sesuka hati. Namun ini tidak berfungsi di bootstrap 4. Bagaimana saya bisa mencapai sesuatu seperti ini di bootstrap 4?

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

Melihat codeply yang disediakan ukurannya tidak sesuai, terutama jika Anda menambahkan beberapa data ke tabel. Lihat bagaimana ini berjalan:

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

Question 2

Diperbarui 2018

Pastikan tabel Anda menyertakan tablekelas. Ini karena tabel Bootstrap 4 bersifat "opt-in" sehingga tablekelas harus ditambahkan secara sengaja ke tabel.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x juga memiliki beberapa CSS untuk mengatur ulang sel tabel agar tidak mengambang ..

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

Saya tidak tahu mengapa ini bukan Bootstrap 4 alpha, tetapi mungkin ditambahkan kembali di rilis final. Menambahkan CSS ini akan membantu semua kolom menggunakan lebar yang ditetapkan di thead..

Demo Bootstrap 4 Alpha 2

UPDATE (pada Bootstrap 4.0.0)

Sekarang Bootstrap 4 adalah flexbox, sel tabel tidak akan mengasumsikan lebar yang benar saat ditambahkan col-*. Solusinya adalah dengan menggunakan d-inline-blockkelas pada sel tabel untuk mencegah tampilan default: flex kolom.

Pilihan lain di BS4 adalah menggunakan kelas-kelas sizing utils untuk lebar ...

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

Demo Bootstrap 4 Alpha 6

Terakhir, Anda dapat menggunakan d-flexpada baris tabel (tr), dan col-*kelas grid pada kolom (th, td) ...

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

Demo Bootstrap 4.0.0 (stabil)

Catatan: Mengubah TR menjadi tampilan: flex dapat mengubah batas

Question 3

Opsi lainnya adalah menerapkan gaya fleksibel pada baris tabel, dan menambahkan col-classeselemen data header / tabel ke tabel:

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">3 columns wide header</th>
      <th class="col-sm-5">5 columns wide header</th>
      <th class="col-sm-4">4 columns wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">3 columns wide content</th>
      <td class="col-sm-5">5 columns wide content</th>
      <td class="col-sm-4">4 columns wide content</th>
    </tr>
  </tbody>
</table>

Question 4

Menggunakan d-flexkelas berfungsi dengan baik tetapi beberapa atribut lain tidak berfungsi lagi sepertivertical-align: middle properti.

Cara terbaik yang saya temukan untuk mengukur kolom dengan sangat mudah adalah dengan menggunakan widthatribut dengan persentase hanya dalam theadsel.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

Question 5

Saya meretas ini untuk rilis Bootstrap 4.1.1 sesuai kebutuhan saya sebelum saya melihat posting @ florian_korner. Terlihat sangat mirip.

Jika Anda menggunakan sass, Anda dapat menempelkan potongan ini di akhir bootstrap Anda termasuk. Tampaknya memperbaiki masalah untuk chrome, IE, dan edge. Sepertinya tidak merusak apa pun di firefox.

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

atau jika Anda hanya menginginkan utilitas css yang telah dikompilasi:

td.col-1, th.col-1 {
  width: 8.33333%; }

td.col-2, th.col-2 {
  width: 16.66667%; }

td.col-3, th.col-3 {
  width: 25%; }

td.col-4, th.col-4 {
  width: 33.33333%; }

td.col-5, th.col-5 {
  width: 41.66667%; }

td.col-6, th.col-6 {
  width: 50%; }

td.col-7, th.col-7 {
  width: 58.33333%; }

td.col-8, th.col-8 {
  width: 66.66667%; }

td.col-9, th.col-9 {
  width: 75%; }

td.col-10, th.col-10 {
  width: 83.33333%; }

td.col-11, th.col-11 {
  width: 91.66667%; }

td.col-12, th.col-12 {
  width: 100%; }

td.col-sm-1, th.col-sm-1 {
  width: 8.33333%; }

td.col-sm-2, th.col-sm-2 {
  width: 16.66667%; }

td.col-sm-3, th.col-sm-3 {
  width: 25%; }

td.col-sm-4, th.col-sm-4 {
  width: 33.33333%; }

td.col-sm-5, th.col-sm-5 {
  width: 41.66667%; }

td.col-sm-6, th.col-sm-6 {
  width: 50%; }

td.col-sm-7, th.col-sm-7 {
  width: 58.33333%; }

td.col-sm-8, th.col-sm-8 {
  width: 66.66667%; }

td.col-sm-9, th.col-sm-9 {
  width: 75%; }

td.col-sm-10, th.col-sm-10 {
  width: 83.33333%; }

td.col-sm-11, th.col-sm-11 {
  width: 91.66667%; }

td.col-sm-12, th.col-sm-12 {
  width: 100%; }

td.col-md-1, th.col-md-1 {
  width: 8.33333%; }

td.col-md-2, th.col-md-2 {
  width: 16.66667%; }

td.col-md-3, th.col-md-3 {
  width: 25%; }

td.col-md-4, th.col-md-4 {
  width: 33.33333%; }

td.col-md-5, th.col-md-5 {
  width: 41.66667%; }

td.col-md-6, th.col-md-6 {
  width: 50%; }

td.col-md-7, th.col-md-7 {
  width: 58.33333%; }

td.col-md-8, th.col-md-8 {
  width: 66.66667%; }

td.col-md-9, th.col-md-9 {
  width: 75%; }

td.col-md-10, th.col-md-10 {
  width: 83.33333%; }

td.col-md-11, th.col-md-11 {
  width: 91.66667%; }

td.col-md-12, th.col-md-12 {
  width: 100%; }

td.col-lg-1, th.col-lg-1 {
  width: 8.33333%; }

td.col-lg-2, th.col-lg-2 {
  width: 16.66667%; }

td.col-lg-3, th.col-lg-3 {
  width: 25%; }

td.col-lg-4, th.col-lg-4 {
  width: 33.33333%; }

td.col-lg-5, th.col-lg-5 {
  width: 41.66667%; }

td.col-lg-6, th.col-lg-6 {
  width: 50%; }

td.col-lg-7, th.col-lg-7 {
  width: 58.33333%; }

td.col-lg-8, th.col-lg-8 {
  width: 66.66667%; }

td.col-lg-9, th.col-lg-9 {
  width: 75%; }

td.col-lg-10, th.col-lg-10 {
  width: 83.33333%; }

td.col-lg-11, th.col-lg-11 {
  width: 91.66667%; }

td.col-lg-12, th.col-lg-12 {
  width: 100%; }

td.col-xl-1, th.col-xl-1 {
  width: 8.33333%; }

td.col-xl-2, th.col-xl-2 {
  width: 16.66667%; }

td.col-xl-3, th.col-xl-3 {
  width: 25%; }

td.col-xl-4, th.col-xl-4 {
  width: 33.33333%; }

td.col-xl-5, th.col-xl-5 {
  width: 41.66667%; }

td.col-xl-6, th.col-xl-6 {
  width: 50%; }

td.col-xl-7, th.col-xl-7 {
  width: 58.33333%; }

td.col-xl-8, th.col-xl-8 {
  width: 66.66667%; }

td.col-xl-9, th.col-xl-9 {
  width: 75%; }

td.col-xl-10, th.col-xl-10 {
  width: 83.33333%; }

td.col-xl-11, th.col-xl-11 {
  width: 91.66667%; }

td.col-xl-12, th.col-xl-12 {
  width: 100%; }

Question 6

Penafian: Jawaban ini mungkin agak lama. Sejak bootstrap 4 beta. Bootstrap telah berubah sejak saat itu.

Kelas ukuran kolom tabel telah diubah dari ini

<th class="col-sm-3">3 columns wide</th>

untuk

<th class="col-3">3 columns wide</th>

Question 7

Saya dapat menyelesaikan masalah ini menggunakan kode berikut menggunakan Bootstrap 4:

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicador:</th>
      <td class="col-9">this is my indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definición:</th>
      <td class="col-9">This is my definition</td>
    </tr>

  </tbody>
</table>

Question 8

Pada Alpha 6 Anda dapat membuat file sass berikut:

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  col, td, th {
    @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          flex: none;
          position: initial;
        }
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          width: 100% / $grid-columns * $i;
        }
      }
    }
  }
}

Answer 1

Di Bootstrap 3, saya bisa menerapkan col-sm-xxke thtag di theaddan mengubah ukuran kolom tabel sesuka hati. Namun ini tidak berfungsi di bootstrap 4. Bagaimana saya bisa mencapai sesuatu seperti ini di bootstrap 4?

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

Melihat codeply yang disediakan ukurannya tidak sesuai, terutama jika Anda menambahkan beberapa data ke tabel. Lihat bagaimana ini berjalan:

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

Answer 2

1

sebagai tambahan untuk pertanyaan ini: jika Anda memiliki konten yang panjang (seperti URL yang sangat panjang) untuk menampilkan tabel bootstrap 4 bukanlah solusi yang bagus bahkan dengan jawaban ukuran di bawah ini. baik menggunakan solusi flex-row atau row / col cenderung bekerja lebih baik dengan overflow dan text-wrap

Killerpixler

Answer 3

Diperbarui 2018

Pastikan tabel Anda menyertakan tablekelas. Ini karena tabel Bootstrap 4 bersifat "opt-in" sehingga tablekelas harus ditambahkan secara sengaja ke tabel.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x juga memiliki beberapa CSS untuk mengatur ulang sel tabel agar tidak mengambang ..

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

Saya tidak tahu mengapa ini bukan Bootstrap 4 alpha, tetapi mungkin ditambahkan kembali di rilis final. Menambahkan CSS ini akan membantu semua kolom menggunakan lebar yang ditetapkan di thead..

Demo Bootstrap 4 Alpha 2

UPDATE (pada Bootstrap 4.0.0)

Sekarang Bootstrap 4 adalah flexbox, sel tabel tidak akan mengasumsikan lebar yang benar saat ditambahkan col-*. Solusinya adalah dengan menggunakan d-inline-blockkelas pada sel tabel untuk mencegah tampilan default: flex kolom.

Pilihan lain di BS4 adalah menggunakan kelas-kelas sizing utils untuk lebar ...

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

Demo Bootstrap 4 Alpha 6

Terakhir, Anda dapat menggunakan d-flexpada baris tabel (tr), dan col-*kelas grid pada kolom (th, td) ...

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

Demo Bootstrap 4.0.0 (stabil)

Catatan: Mengubah TR menjadi tampilan: flex dapat mengubah batas

Answer 4

Sebenarnya ukurannya tidak sesuai. Lihat jika Anda menambahkan beberapa batas untuk melihat bagaimana ukurannya dan kapan Anda menambahkan baris ke badan. Saya memasang kode di pertanyaan

Killerpixler

Answer 5

Sebenarnya contoh BS4-A6 Anda tidak berfungsi jika Anda memiliki konten yang meluap di kolom karena kolom lain tidak diperpanjang. Coba tempel beberapa lorem ipsum dalam satu kolom.

Killerpixler

Answer 6

1

Solusi Anda berhasil. Dalam kasus saya, saya perlu menambahkan no-talang di tr untuk menghindari padding negatif jsfiddle.net/Vimalan/xhvdcasn

Vimalan Jaya Ganesh

Answer 7

Ya, kelas w-25,, w-50dan w-75bekerja dengan bootstrap 4. Terima kasih!

olidem

Answer 8

26

Opsi lainnya adalah menerapkan gaya fleksibel pada baris tabel, dan menambahkan col-classeselemen data header / tabel ke tabel:

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">3 columns wide header</th>
      <th class="col-sm-5">5 columns wide header</th>
      <th class="col-sm-4">4 columns wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">3 columns wide content</th>
      <td class="col-sm-5">5 columns wide content</th>
      <td class="col-sm-4">4 columns wide content</th>
    </tr>
  </tbody>
</table>

Jacob van Lingen
sumber

1

Bekerja tetapi vertical-align: middletidak berfungsi lagi dengan d-flexkelas.

Malam

Penjajaran vertikal memang tidak berfungsi pada tata letak flexbox. Gunakan align-items: baseline. Untuk mempelajari lebih lanjut tentang flexbox, baca panduan

Jacob van Lingen

Answer 9

1

Bekerja tetapi vertical-align: middletidak berfungsi lagi dengan d-flexkelas.

Malam

Answer 10

Penjajaran vertikal memang tidak berfungsi pada tata letak flexbox. Gunakan align-items: baseline. Untuk mempelajari lebih lanjut tentang flexbox, baca panduan

Jacob van Lingen

Answer 11

Menggunakan d-flexkelas berfungsi dengan baik tetapi beberapa atribut lain tidak berfungsi lagi sepertivertical-align: middle properti.

Cara terbaik yang saya temukan untuk mengukur kolom dengan sangat mudah adalah dengan menggunakan widthatribut dengan persentase hanya dalam theadsel.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

Answer 12

5

Solusi paling sederhana dan terbaik, jujur. Segala sesuatu yang lain gagal total bagi saya.

Makhluk

Answer 13

3

Catatan Menggunakan atribut lebar untuk <th> sekarang tidak didukung di HTML5

StefanJM

Answer 14

Saya meretas ini untuk rilis Bootstrap 4.1.1 sesuai kebutuhan saya sebelum saya melihat posting @ florian_korner. Terlihat sangat mirip.

Jika Anda menggunakan sass, Anda dapat menempelkan potongan ini di akhir bootstrap Anda termasuk. Tampaknya memperbaiki masalah untuk chrome, IE, dan edge. Sepertinya tidak merusak apa pun di firefox.

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

atau jika Anda hanya menginginkan utilitas css yang telah dikompilasi:

td.col-1, th.col-1 {
  width: 8.33333%; }

td.col-2, th.col-2 {
  width: 16.66667%; }

td.col-3, th.col-3 {
  width: 25%; }

td.col-4, th.col-4 {
  width: 33.33333%; }

td.col-5, th.col-5 {
  width: 41.66667%; }

td.col-6, th.col-6 {
  width: 50%; }

td.col-7, th.col-7 {
  width: 58.33333%; }

td.col-8, th.col-8 {
  width: 66.66667%; }

td.col-9, th.col-9 {
  width: 75%; }

td.col-10, th.col-10 {
  width: 83.33333%; }

td.col-11, th.col-11 {
  width: 91.66667%; }

td.col-12, th.col-12 {
  width: 100%; }

td.col-sm-1, th.col-sm-1 {
  width: 8.33333%; }

td.col-sm-2, th.col-sm-2 {
  width: 16.66667%; }

td.col-sm-3, th.col-sm-3 {
  width: 25%; }

td.col-sm-4, th.col-sm-4 {
  width: 33.33333%; }

td.col-sm-5, th.col-sm-5 {
  width: 41.66667%; }

td.col-sm-6, th.col-sm-6 {
  width: 50%; }

td.col-sm-7, th.col-sm-7 {
  width: 58.33333%; }

td.col-sm-8, th.col-sm-8 {
  width: 66.66667%; }

td.col-sm-9, th.col-sm-9 {
  width: 75%; }

td.col-sm-10, th.col-sm-10 {
  width: 83.33333%; }

td.col-sm-11, th.col-sm-11 {
  width: 91.66667%; }

td.col-sm-12, th.col-sm-12 {
  width: 100%; }

td.col-md-1, th.col-md-1 {
  width: 8.33333%; }

td.col-md-2, th.col-md-2 {
  width: 16.66667%; }

td.col-md-3, th.col-md-3 {
  width: 25%; }

td.col-md-4, th.col-md-4 {
  width: 33.33333%; }

td.col-md-5, th.col-md-5 {
  width: 41.66667%; }

td.col-md-6, th.col-md-6 {
  width: 50%; }

td.col-md-7, th.col-md-7 {
  width: 58.33333%; }

td.col-md-8, th.col-md-8 {
  width: 66.66667%; }

td.col-md-9, th.col-md-9 {
  width: 75%; }

td.col-md-10, th.col-md-10 {
  width: 83.33333%; }

td.col-md-11, th.col-md-11 {
  width: 91.66667%; }

td.col-md-12, th.col-md-12 {
  width: 100%; }

td.col-lg-1, th.col-lg-1 {
  width: 8.33333%; }

td.col-lg-2, th.col-lg-2 {
  width: 16.66667%; }

td.col-lg-3, th.col-lg-3 {
  width: 25%; }

td.col-lg-4, th.col-lg-4 {
  width: 33.33333%; }

td.col-lg-5, th.col-lg-5 {
  width: 41.66667%; }

td.col-lg-6, th.col-lg-6 {
  width: 50%; }

td.col-lg-7, th.col-lg-7 {
  width: 58.33333%; }

td.col-lg-8, th.col-lg-8 {
  width: 66.66667%; }

td.col-lg-9, th.col-lg-9 {
  width: 75%; }

td.col-lg-10, th.col-lg-10 {
  width: 83.33333%; }

td.col-lg-11, th.col-lg-11 {
  width: 91.66667%; }

td.col-lg-12, th.col-lg-12 {
  width: 100%; }

td.col-xl-1, th.col-xl-1 {
  width: 8.33333%; }

td.col-xl-2, th.col-xl-2 {
  width: 16.66667%; }

td.col-xl-3, th.col-xl-3 {
  width: 25%; }

td.col-xl-4, th.col-xl-4 {
  width: 33.33333%; }

td.col-xl-5, th.col-xl-5 {
  width: 41.66667%; }

td.col-xl-6, th.col-xl-6 {
  width: 50%; }

td.col-xl-7, th.col-xl-7 {
  width: 58.33333%; }

td.col-xl-8, th.col-xl-8 {
  width: 66.66667%; }

td.col-xl-9, th.col-xl-9 {
  width: 75%; }

td.col-xl-10, th.col-xl-10 {
  width: 83.33333%; }

td.col-xl-11, th.col-xl-11 {
  width: 91.66667%; }

td.col-xl-12, th.col-xl-12 {
  width: 100%; }

Answer 15

5

Penafian: Jawaban ini mungkin agak lama. Sejak bootstrap 4 beta. Bootstrap telah berubah sejak saat itu.

Kelas ukuran kolom tabel telah diubah dari ini

<th class="col-sm-3">3 columns wide</th>

untuk

<th class="col-3">3 columns wide</th>

Abdalla Arbab
sumber

Ini sepertinya tidak berhasil dalam mengatur lebar kolom: codeply.com/go/Utyon2XEB6

Zim

Lihat stackoverflow.com/questions/41794746/…

Abdalla Arbab

1

Pertanyaan lainnya tidak berhubungan. Lebar kolom tidak berfungsi pada sel tabel karena BS4 alpha 6 flexbox seperti yang dijelaskan dalam jawaban saya.

Zim

Answer 16

Ini sepertinya tidak berhasil dalam mengatur lebar kolom: codeply.com/go/Utyon2XEB6

Zim

Answer 17

Lihat stackoverflow.com/questions/41794746/…

Abdalla Arbab

Answer 18

1

Pertanyaan lainnya tidak berhubungan. Lebar kolom tidak berfungsi pada sel tabel karena BS4 alpha 6 flexbox seperti yang dijelaskan dalam jawaban saya.

Zim

Answer 19

Saya dapat menyelesaikan masalah ini menggunakan kode berikut menggunakan Bootstrap 4:

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicador:</th>
      <td class="col-9">this is my indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definición:</th>
      <td class="col-9">This is my definition</td>
    </tr>

  </tbody>
</table>

Answer 20

Pada Alpha 6 Anda dapat membuat file sass berikut:

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  col, td, th {
    @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          flex: none;
          position: initial;
        }
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          width: 100% / $grid-columns * $i;
        }
      }
    }
  }
}

Answer 21

kode ini tidak berfungsi sama sekali - mencoba men-debug selama 1,5 jam tetapi pengetahuan saya tentang sass terlalu lemah untuk melakukan itu. Tolong posting contoh kerja lain kali.

Slowwie

Ukuran kolom tabel

Jawaban: