Como tornar a tabela html sensível?
usei o 'Bootstrap div' para fazer a tabela abaixo,mas não responde aos dispositivos móveis. Eu usei col-xs, mas ainda assim a coluna se fundem uns com os outros em mobile view.Is há outra forma de tornar este código sensível aos dispositivos móveis?
<div class="container" style="color: grey; padding-top: 40px">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-xs-12" style="border-bottom: 1px solid #eee;">
<div class="col-md-6 col-xs-4">
<span>Item</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Price</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Quantity</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Total</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Delivery Charge</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Discount</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Subtotal</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-md-6 col-xs-6">
<div class="col-md-5 col-xs-5">
<img src="https://n1.sdlcdn.com/imgs/a/i/0/large/Mboss-Overnighters-SDL963993531-1-2f227.jpg" class="img-responsive">
</div>
<div class="col-md-7 col-xs-7 ">
<h5>Deisy brown Laptop Overnight</h5><br>
<div class="row">
<div class="col-md-12 col-sm-2 ">
<h5>
<b>Seller Information:</b>
</h5>
</div>
<div class="col-md-12 col-sm-10">
<h6>
<b>Book Centre</b><br>
371 Colvinjh de sihjglva ,<br>
vvv Place,<br>
Chghhhgg2<br>
0123689955<br>
</h6>
</div>
</div>
</div>
</div>
<div class="col-md-1 col-xs-1">
<span>5780</span><br>
</div>
<div class="col-md-1 col-xs-1">
<span> 5780</span>
</div>
<div class="col-md-1 col-xs-1">
<span> 5780</span>
</div>
<div class="col-md-1 col-xs-1">
<span>0%</span>
</div>
<div class="col-md-1 col-xs-1">
<span>575855</span>
</div>
<div class="col-md-1 col-xs-1">
<span>575855</span>
</div>
</div>
</div>
</div>
5 answers
Pode simplesmente embrulhar a sua marca <table>
dentro de <div class="table-responsive"></div>
uma vez que está a usar bootstrap. Assim: (use <table>
em vez do sistema de grelha (por exemplo, col-xs-1 etc.))
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Visite esta ligação (bootstrap) para mais informações:
[[[12]}Visite-Me]
.. É isso!
Codificação Feliz:)
As Quatro opções seguintes podem ser consideradas para tornar uma tabela sensível. Por favor, escolha o que se encaixa na sua exigência.
Squash : Se as colunas tiverem pouco conteúdo, elas poderão esmagar horizontalmente sem problemas num ecrã móvel, pelo que não alterar a disposição terá de ser uma opção válida.
Scroll Vertical: Se a disposição e o conteúdo forem exactos e críticos, um utilizador poderá deslocar-se para a esquerda ou para a direita. Isto é trivial em CSS com um overflow="auto" involucro.
Recolher pelas linhas : dividir cada linha na sua própria mini-tabela de colunas em ecrãs pequenos. Mudar a visualização: a tabela para a visualização: o bloco irá causar isto com a marcação normal da tabela.
Colapsar pelas colunas: é aqui que as coisas se complicam. Você não pode fazer isso com a marcação da tabela normal em CSS puro, porque a ordem de código é por linhas e os papéis trancam-no. Ou temos de mudar a marca ou começar a manipular com JavaScript.
É melhor usar a tabela de resposta Bootstrap. Aqui está a ligação. esta é a ligação mais preferível. usei muitas vezes.
Https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h
@temp há muito tempo atrás eu usei o seguinte código para tornar a minha tabela sensível. Espero que te ajude.
/*...............Table Starts....................*/
.table_custom_1 {
width: 100%;
border: 1px solid #eee;
overflow: hidden;
}
.table_custom_1 td {
display: block;
}
.table_custom_1 th, .table_custom_1 td {
display: table-cell;
text-align: left;
}
.table_custom_1, .custom_table {
width: 100%;
}
.table_custom_1 thead tr th, .custom_table tr th {
background: #ECECEC none repeat scroll 0 0;
color: #999999;
font-family: opensans-Bold;
font-size: 11px;
padding: 5px 6px;
}
.table_custom_1 tbody tr td {
border-bottom: 1px solid #e0e0e0;
color: #414042;
font-family: opensans-regular;
font-size: 12px;
padding: 8px 6px;
vertical-align: top;
word-break: break-all;
}
.table_custom_1 tbody tr td.table_secondary_text {
font-size: 10px;
color: #999999;
}
.table_custom_1 tr td:first-child {
padding-left: 15px;
}
.table_custom_1 tr td:last-child, .table_custom_1 tr th:last-child {
padding-right: 15px;
}
.table_custom_1 tr.selected td {
background: #FAFAFA;
}
.table_custom_1 .btn {
display: inline-block;
}
.table_custom_1 .table_icon i {
color: #878787;
font-size: 14px;
position: relative;
top: 3px;
}
.table_custom_1 .table_icon:hover, .table_custom_1 .table_icon .table_icon:focus {
text-decoration: none;
}
.table_custom_1 .badge {
margin-top: -3px;
margin-left: 4px;
}
.table_custom_1 thead tr th input {
font-size: 12px;
}
.table_custom_1 .table_custom_1 {
border: medium none;
}
.table_custom_1 tbody tr td i.indicator {
margin-right: 5px;
font-size: 8px;
}
/*.....................Media Queries starts.........*/
@media (max-width: 700px) {
.table_custom_1 th, .table_custom_1 td {
display: inherit;
}
.table_custom_1 td:before {
content: attr(data-th) ": ";
width: 6.5em;
display: inline-block;
color: #b7b7b7;
}
.table_custom_1 {
border: 0px;
}
.table_custom_1 tr {
background-color: #fff;
border: 1px solid #eee;
display: block;
margin-bottom: 15px;
box-shadow: 0 1px 5px -3px rgb(164, 164, 164);
}
.table_custom_1 tr td {
padding: 4px 10px !important;
}
.table_custom_1 tbody tr td:first-child:before {
padding-left: 0;
content: '';
width: 0;
}
.table_custom_1 tbody tr td:first-child {
font-family: OpenSans-Semibold;
color: #217589;
font-size: 16px;
}
.table_custom_1.checkbox_table thead tr th:first-child {
display: block;
padding-left: 15px;
}
.table_custom_1.checkbox_table thead tr th, .table_custom_1 thead {
display: none;
}
.checkbox_table thead {
display: block !important;
}
}
@media (max-width:600px) {
.table_custom_1 tr, .table_custom_1 td {
display: block;
}
.table_custom_1 tbody tr td:first-child {
color: #217589;
font-size: 16px;
}
.table_custom_1 thead {
display: none;
}
}
@media (min-width: 480px) {
.table_custom_1 td:before {
display: none;
}
.table_custom_1 th:first-child, .table_custom_1 td:first-child {
padding-left: 15px;
}
.table_custom_1 th:last-child, .table_custom_1 td:last-child {
padding-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<table class="table_custom_1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>D.O.B</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td data-th="Age">20</td>
<td data-th="D.O.B">1977</td>
<td data-th="Location">Delhi</td>
</tr>
<tr>
<td data-th="Name">Vivek</td>
<td data-th="Age">30</td>
<td data-th="D.O.B">1986</td>
<td data-th="Location">Vadodara</td>
</tr>
<tr>
<td data-th="Name">Sahil</td>
<td data-th="Age">23</td>
<td data-th="D.O.B">1973</td>
<td data-th="Location">J&K</td>
</tr>
</tbody>
</table>
</div>
</div>
Aqui está um violino. HTML :
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>Qasim</td>
<td>23yrs</td>
<td>Male</td>
</tr>
<tr>
<td>Ali</td>
<td>19yrs</td>
<td>Male</td>
</tr>
<tr>
<td>William</td>
<td>34yrs</td>
<td>Male</td>
</tr>
</tbody>
</table>
CSS :
td{
width:100px;
}
@media (max-width: 600px) {
thead {
display: none;
}
tr{
display:grid;
border-bottom:1px solid #000000;
}
td:nth-of-type(1):before { content: "Name"; }
td:nth-of-type(2):before { content: "Age"; }
td:nth-of-type(3):before { content: "Gender"; }
td:before{
width:150px;
float:left;
}
td{
width:300px;
}
}