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

Posted 2023-03-05

【中文标题】如何使所有表格在 DIV 中响应

【英文标题】：How to make all tables responsive within DIV

【发布时间】：2019-05-05 13:38:30

【问题描述】：

此代码用于溢出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" >
 ....
</table></div>

如何摆脱“maintable”并使其适用于该页面？

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

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

【问题讨论】：

“如何摆脱“maintable”是什么意思？

我不想要 maintable。相反，我想要

【参考方案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>

【讨论】：

非常感谢乔纳坦！真的很感激！

请点赞/接受以表达您的感激之情。这就是让这台机器保持运转的原因！