Question

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

如何在DIV中使所有表响应

1 个答案: