Jak zrobić, aby komórki w tabeli były identycznej szerokości i/lub wysokości, gdy strona jest responsywna?

Question

Chcę zrobić, aby komórki w tabeli były identycznej szerokości i/lub wysokości, gdy strona jest responsywna. Wiem, że Bootstrap ma własne tabele, ale ja nie chce używać takich. Chodzi mi o to, by nie ustawiać stałych szerokości i/lub wysokości, ale żeby zawsze przystosowały się do wielkości diva, w którym są. Sam kąbinowałem z ustawianiem różnych właściwości różnych znaczników w CSS, ale nie udało mi się dojść do tego, jak to zrobić w ten sposób, więc stworzyłem kod w JS z biblioteką JQuery, który zmienia szerokość wszystkich komórek na 1/13 szerokości tabeli, ale wydaje mi się, że musi być łatwiejszy sposób. Tu kod tabeli:

<div id="table" class="px-4 px-md-3 py-3">
  <table border = "1px" bordercolor = "#7289DA" width="100%" height="100%">
    <tr><th></th><th>1.</th><th>2.</th><th>3.</th><th>4.</th><th>5.</th><th>6.</th><th>7.</th><th>8.</th><th>9.</th><th>10.</th><th>11.</th><th>12.</th></tr>
    <tr><th>1.1</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>1.2</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>1.3</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>✓</th></tr>
    <tr><th>1.4</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th></tr>
    <tr><th>1.5</th><th>X</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>1.6</th><th>X</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>1.7</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>1.8</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th></tr>
    <tr><th>2.1</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>2.2</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>2.3</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>2.4</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>3.1</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
    <tr><th>3.2</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>X</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th></tr>
    <tr><th>3.3</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>✓</th><th>X</th></tr>
  </table>
</div>

a tu JS:

$(window).on("load resize", function() {
  $("th").width($("table").width() / 13);
});

Jeśli da się to inaczej zrobić to proszę o informację. :D

Comments

a wartości procentowe?

Answer 1

Nadaj w css szerokość dla th. A swoja droga dlaczego nie użyłeś td?

Answer 2

Użyj procentów, rozmiar będzie zmieniał się wraz z ich pojemnikiem:

/* ... */
    width: 50%;
    height: 50%;
/* ... */

Tutaj masz tabelkę ze wszystkimi wartościami relatywnymi: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Relative_length_units

Answer 3

Możesz użyć wspomnianych już procentów lub vh i vw itd.

[Tabelka "Relative Lengths"]

Comments

Najczęściej tak, jednak na zadane powyżej pytanie znałem odpowiedź, więc wystarczyło mi jedynie zweryfikowanie odpowiedzi, co w przypadku tak krótkiej tabelki nie stanowiło problemu

---

Myślę, że obaj mamy rację, jednak lepiej wybierać MDN.

---

Obaj mamy rację, ponieważ obaj podaliśmy tę samą odpowiedź tylko z innych źródeł

---

W sumie, to tak, ale jednak nie.

                    |

                    |

                    |

                    V

---

A co jeśli dane źródło ma np. w 75% procentach rzetelne informacje, a w pozostałych 25% już błędne? Dajmy na to, że akurat na przykładzie jednego problemu informacje z tego źródła mogą być ok. Polecając komuś to źródło istnieje ryzyko, że ktoś odwiedzając je w poszukiwaniu innych informacji natknie się już na tę gorszą część z błędami. Jeśli będzie na tyle mało doświadczony, że tych błędnych informacji nie zweryfikuje, to może się po prostu nauczyć bzdur i/lub utrwalić złe nawyki. Po co więc podawać źródło wątpliwej reputacji?