Jak wyświetlić tabele na telefonie komórkowym za pomocą Bootstrap?

Moje stoły wyświetlają się dobrze na komputerze, ale kiedy próbuję wyświetlić wersję mobilną, mój stół jest zbyt szeroki, aby zmieścić się na ekranie urządzenia mobilnego. Używam responsywnego układu.

Jak ustawić szerokości tabel w widoku mobilnym? Jakie są inne możliwości prezentowania danych tabelarycznych w widokach mobilnych za pomocą Bootstrap?

Bootstrap 3 wprowadza responsywne tabele :

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 4 jest podobny, ale z większą kontrolą dzięki kilku nowym klasom :

... responsywny we wszystkich rzutniach ... z .table-responsive. Lub wybierz maksymalny punkt przerwania, z którym ma być responsywna tabela do przy użyciu .table-responsive{-sm|-md|-lg|-xl}.

Podziękowania dla Jasona Bradleya za dostarczenie przykładu:

Możesz również rozważyć wypróbowanie jednego z tych podejść, ponieważ większe stoły nie są zbyt przyjazne na urządzeniach mobilnych, nawet jeśli to działa:

http://elvery.net/demo/responsive-tables/

Mam słabość do „No More Tables”, ale to oczywiście zależy od twojej aplikacji.

Wszystkie tabele w ramach bootstrap są rozciągane zgodnie z kontenerem, w którym się znajdują. Możesz umieścić swoje tabele wewnątrz .spanelementu, aby kontrolować rozmiar. To pytanie SO może ci pomóc

Dlaczego tabele Twitter Bootstrap zawsze mają 100% szerokości?

Po prawie 1 miesiącu poszukiwań znalazłem poniższy kod, który działa bardzo pięknie iw 100% idealnie na mojej stronie. Aby sprawdzić podgląd, jak to działa, możesz sprawdzić z linku. https://www.jobsedit.in/state-government-jobs/

KOD CSS -----

@media only screen and (max-width: 500px)  {
    .resp table  { 
        display: block ; 
    }   
    .resp th  { 
        position: absolute;
        top: -9999px;
        left: -9999px;
        display:block ;
    }   
     .resp tr { 
    border: 1px solid #ccc;
    display:block;
    }   
    .resp td  { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        width:100%;
        background-color:White;
        text-indent: 50%; 
        text-align:left;
        padding-left: 0px;
        display:block;      
    }
    .resp  td:nth-child(1)  {
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        font-size:20px;
        text-indent: 0%;
        text-align:center;
}   
    .resp td:before  { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        text-indent: 0%;
        text-align:left;
        white-space: nowrap;
        background-color:White;
        font-weight:bold;
    }
    /*
    Label the data
    */
    .resp td:nth-of-type(2):before  { content: attr(data-th) }
    .resp td:nth-of-type(3):before  { content: attr(data-th) }
    .resp td:nth-of-type(4):before  { content: attr(data-th) }
    .resp td:nth-of-type(5):before  { content: attr(data-th) }
    .resp td:nth-of-type(6):before  { content: attr(data-th) }
    .resp td:nth-of-type(7):before  { content: attr(data-th) }
    .resp td:nth-of-type(8):before  { content: attr(data-th) }
    .resp td:nth-of-type(9):before  { content: attr(data-th) }
    .resp td:nth-of-type(10):before  { content: attr(data-th) }
}

KOD HTML --

<table>
<tr>
<td data-th="Heading 1"></td>
<td data-th="Heading 2"></td>
<td data-th="Heading 3"></td>
<td data-th="Heading 4"></td>
<td data-th="Heading 5"></td>
</tr>
</table>