Как сделать все таблицы отзывчивыми в DIV - PullRequest
Новая
       15

Как сделать все таблицы отзывчивыми в DIV

0 голосов
/ 04 декабря 2018

Этот код для переполнения всех таблиц внутри div s работает (отзывчиво на мобильном телефоне).Предостережение заключается в том, что все div s должны быть внутри таблицы с именем "maintable". 

@media only screen and (max-width: 800px) {
    table.maintable td>div {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
    }

        .maintable, .maintable tbody, .maintable tbody tr, .maintable tbody tr td
    {
        display: block;
        overflow: hidden;
        width: 100%;
        overflow-x: scroll;
    }

    #responsive-tables table {
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
    }
    #responsive-tables tbody tr {
        display: table-row;
    }
    #responsive-tables tbody tr td {
        display: table-cell;
        padding: 15px 10px;
        vertical-align: inherit;
        width: -webkit-fill-available;
    }
    #responsive_mobile_outer img {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        display: block;
        max-width: 300px;
    }

}

Для этой страницы: 

<table class="maintable" cellpadding="0" cellspacing="0">  
    <tr>    
        <td>

<div id="responsive-tables"><table class="feestable" align="center" border="0" cellpadding="2" cellspacing="1" width="99%">
 ....
</table></div>

Как избавиться от "maintable"и заставить его работать на этой странице? 

<div class="best">
 <div class="maincell">

<div id="responsive-tables"><table class="feestable" align="center" border="0" cellpadding="2" cellspacing="1" width="99%">
 ....
</table></div>

1 Ответ

0 голосов
/ 05 декабря 2018

Ваши требования достаточно ясны, но ваш вопрос обременен ненужными подробностями.Вот главный принцип.Я оставлю это вам, чтобы адаптировать это к вашему собственному приложению. 

.table-responsive {
  max-width:100%;
  overflow-x: auto;
}
<div class="table-responsive">
	<table>
		<thead>
			<tr>
				<th>Column 01</th>
				<th>Column 02</th>
				<th>Column 03</th>
				<th>Column 04</th>
				<th>Column 05</th>
				<th>Column 06</th>
				<th>Column 07</th>
				<th>Column 08</th>
				<th>Column 09</th>
				<th>Column 10</th>
				<th>Column 11</th>
				<th>Column 12</th>
				<th>Column 13</th>
				<th>Column 14</th>
				<th>Column 15</th>
			</tr>
			<tr>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
			</tr>
			<tr>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
				<td>Testing 123...</td>
			</tr>
		</thead>
	</table>
</div>
...