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?
Odpowiedzi:
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:
table-responsiveklasa? Dokumentacja Bootstrap mówi „aby przewijać w poziomie”, ale nie zauważam różnicy związanej z przewijaniem. Jedyną różnicą, którą zauważam, jest to, że stół ma obramowanie na zewnątrz, gdy ma określony rozmiar ekranu ( jak widać w przykładzie ).
.table-responsivedo samego stołu (np. <table class="table table-responsive">), Zamiast owijać stół .table-responsive, co nawet wskazałeś w swoim przykładzie.
hidden-*w tdkolumnach, które chcesz ukryć getbootstrap.com/docs/3.3/css/#responsive-utilities
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>