如何使所有表格在 DIV 中响应

Question

此代码用于溢出divs 内的所有表格（在移动设备上响应）。需要注意的是，所有divs 都必须位于名为“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>

Answer 1

您的要求很明确，但您的问题包含了不必要的细节。这里是总校长。我会把它留给你来适应你自己的应用程序。

.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>