html - 制作宽表，在移动设备上折叠成行-6ren

html - 制作宽表，在移动设备上折叠成行

转载作者：行者123 更新时间：2023-11-28 04:50:31

我们有一些具有不同表数据的产品数据。有时有 2 列，然后可能有 4 列。当有 4 列时，它会在移动设备上引起问题并且不适合我们的响应式布局。

任何人都可以帮助让表格在移动设备上更好地工作。

这是原始表格:https://jsfiddle.net/Lnjsv48g/

我正在使用的指南:https://css-tricks.com/examples/ResponsiveTables/responsive.php

这是我的响应尝试:https://jsfiddle.net/f1z6czeo/

<table align="center" border="2" style="height:445px; width:761px">
        <caption>Technical Information</caption>
        <tbody>
            <tr>
                <td>Washer Speeds</td>
                <td>Speed 1</td>
                <td>Speed 2</td>
                <td>Speed 3</td>
            </tr>
            <tr>
                <td>Revs per minute squared</td>
                <td>480m³/hr</td>
                <td>600m³/hr</td>
                <td>950³/hr</td>
            </tr>
            <tr>
                <td>Extraction Rate ³/hr Recirculated</td>
                <td>322m³/hr</td>
                <td>402m³/hr</td>
                <td>636m³/hr</td>
            </tr>
            <tr>
                <td>Noise Levels DB/A</td>
                <td>54 DB</td>
                <td>57 DB</td>
                <td>63 DB</td>
            </tr>
            <tr>
                <td>Minimum Height of Product</td>
                <td>No Less Than 650mm From Your Base</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>DPP Rating</td>
                <td>D</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Backup Filter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (Optional Extra)</td>
                <td>Round 5 (2 Filters required)</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Light Options</td>
                <td>2x 1.2w LED Bulk BBT299</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Marble Size &nbsp; &nbsp; &nbsp; &nbsp; (Marble Kit optional Extra)</td>
                <td>125mm Minimum(150mm is recommended)(Up to 4 Mtr&nbsp;&nbsp; Only)</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Remote Control</td>
                <td>No</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Warranty &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; (Subject to registration)</td>
                <td>3 years</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>BPP Scheme Colour Code</td>
                <td>N/A</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>BOR Rand Filters&nbsp;&nbsp;&nbsp; (Cleaner Safe)</td>
                <td>Y</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Box Type</td>
                <td>3 Amp</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Gang Type</td>
                <td>Toggle Control</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>
                <table border="0" style="height:82px; width:273px">
                    <tbody>
                        <tr>
                            <td><a href="/Installation Instruction.pdf" target="_blank" title="60cm curved glass cooker hoods tech sheet"><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></a></td>
                            <td>Installation Guide<br>
                            PDF File - Opens in a New Window</td>
                        </tr>
                    </tbody>
                </table>
                </td>
                <td>
                <table border="0">
                    <tbody>
                        <tr>
                            <td><a href="/install_guide.pdf" target="_blank" title="60cm curved glass cooker hoods tech sheet"><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></a></td>
                            <td>Product Specification Guide<br>
                            PDF File - Opens in a New Window</td>
                        </tr>
                    </tbody>
                </table>
                </td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>

最佳答案

这是一个解决方案:查看代码片段

@media only screen and (max-width: 760px){

table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

table, thead, tbody, th {
    display: block;
}
tbody, td, tr {
    display: inline-block;
}

thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
tr.techinfo {
    border: 1px solid #aaa;
    width: 100%;
    background: #eee;
    box-sizing: border-box;
}
.techinfo > td {
  float: right;
  width: 60%;
  display: inline-block;
  background: #eee;
  padding-left: 3px;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}
.techinfo > td:first-child {
  width: 39%;
  float: left;
  line-height: 4em;
}
.techinfo > td:nth-child(2){
    background: #bbb;
}
.techinfo > td:nth-child(3){
    background: #ccc;
}
.techinfo > td:nth-child(4){
    background: #ddd;
}
.docs {
  width: 100%;
  border: none;
}

.docs > td {
  width: 100%;
  box-sizing: border-box;
  background-color: #eee;
}
.docs > td > table {
    box-sizing: border-box;
    padding: 0 3px;
}
.docs > td tr {
  border: none;
    box-sizing: border-box;
}
}

<table align="center" border="2">
	<caption>Technical Information</caption>
	<tbody>
		<tr class="techinfo">
			<td>Washer Speeds</td>
			<td>Speed 1</td>
			<td>Speed 2</td>
			<td>Speed 3</td>
		</tr>
		<tr class="techinfo">
			<td>Revs per minute squared</td>
			<td>480m³/hr</td>
			<td>600m³/hr</td>
			<td>950³/hr</td>
		</tr>
		<tr class="techinfo">
			<td>Extraction Rate ³/hr Recirculated</td>
			<td>322m³/hr</td>
			<td>402m³/hr</td>
			<td>636m³/hr</td>
		</tr>
		<tr class="techinfo">
			<td>Noise Levels DB/A</td>
			<td>54 DB</td>
			<td>57 DB</td>
			<td>63 DB</td>
		</tr>
		<tr class="techinfo">
			<td>Minimum Height of Product</td>
			<td>No Less Than 650mm From Your Base</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>DPP Rating</td>
			<td>D</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>Backup Filter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (Optional Extra)</td>
			<td>Round 5 (2 Filters required)</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>Light Options</td>
			<td>2x 1.2w LED Bulk BBT299</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>Marble Size (Marble Kit optional Extra)</td>
			<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>Remote Control</td>
			<td>No</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>Warranty(Subject to registration)</td>
			<td>3 years</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>BPP Scheme Colour Code</td>
			<td>N/A</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>BOR Rand Filters&nbsp;&nbsp;&nbsp; (Cleaner Safe)</td>
			<td>Y</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>Box Type</td>
			<td>3 Amp</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="techinfo">
			<td>Gang Type</td>
			<td>Toggle Control</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="docs">
			<td> 
			<table>
				<tbody>
					<tr>
						<td><a href="/Installation Instruction.pdf" target="_blank" title="60cm curved glass cooker hoods tech sheet"><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></a></td>
						<td>Installation Guide<br>
						PDF File - Opens in a New Window</td>
					</tr>
				</tbody>
			</table>
      </td>
      <td>
			<table>
				<tbody>
					<tr>
						<td><a href="/install_guide.pdf" target="_blank" title="60cm curved glass cooker hoods tech sheet"><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></a></td>
						<td>Product Specification Guide<br>
						PDF File - Opens in a New Window</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>

关于html - 制作宽表，在移动设备上折叠成行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40737675/

文章推荐： javascript - Javascript构造函数属性有什么意义？

文章推荐： c++ - cmake add_custom_target 转义

文章推荐： c++ - 如何使用 opencv 计算视频的 fps(经过处理)

文章推荐： javascript - 通过 CSS3 模拟垂直轮胎上的旋转动画

language-agnostic - 是(宽，高)还是(高，宽)？
函数参数中或显示尺寸时(高度，宽度)的顺序是否有约定？最佳答案我不知道大量的语言，但我使用过的语言(宽度，高度)。它更适合沿着 (x, y) 坐标线。关于language-agnostic -
编译器不会将长*宽*高计算为立方英寸
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 6 年前。 Improve th
youtube - YouTube嵌入广告的视频尺寸更大(宽/高)
有没有办法显示自定义宽度/高度的YouTube视频？最佳答案在YouTube网站上的this link中: You can resize the player by editing the obj
python - pandas数据转换长-宽-长
如何从此表单获取数据(数据的长表示): import pandas as pd df = pd.DataFrame({ 'c0': ['A','A','B'], 'c1': ['b',
css - 我的(宽)页面在低分辨率下看起来很奇怪
我在让宽度为 900px 的页面在宽度低于 900px 的分辨率下看起来不错时遇到了一些麻烦。这包括智能手机等移动设备。看起来我在页面上放大了，但无法滚动或缩小。我的页面包装器被定义为以屏幕为中心。这
html - 如何确保表格永远不会比包含它的 div 宽？
我有一个包含一个表的 div，它有另一个带有动态变化文本的 div。div 有样式 overflow: hidden; white-space: nowrap; text-overflow: elli
HTML:宽
不生成水平滚动条
我一直在愚弄下面的html代码。我已将 div id ="mainWide"设置为 2500 像素的宽度，这比我的屏幕还宽，我希望在主浏览器窗口中有一个水平滚动条，而不是在 div block 本身中
javascript - 文章比父 div 宽
当我的屏幕浏览器窗口在 992px-1199px 之间时，我的文章元素比它们的父 div (.wrapper) 更宽。所以在这个屏幕宽度下，面板重叠并且看起来不对。在所有其他屏幕宽度下，我的代码都准
css - 我怎样才能让我的行 100% 宽？
我在对齐某些行时遇到了一些问题。我正在显示一个占据视口(viewport) 100% 高度的部分。因此，当您在屏幕上查看此部分时，您只会看到此部分。在这个部分中，我有一个标题和副标题。标题应显示在节
css - 为什么输入字段比它的父 div 宽？
为什么表单输入字段比其父 div 宽？宽度应用于文本 div，但不应用于其中包含表单字段的 div。为什么会这样？ See the livecode here. .parent { width:
html - 我怎样才能使这个标题 100% 宽？
我想让这个标题 100% 宽。我在 jsfiddle 上试过这个，但是左边和右边还有一些余量。 CSS: #header { background: url("../img/top-bg.png
javascript - 如何去除页面的白边并使其 100% 宽
我的页面宽度有问题。无论我尝试什么，它的左边或右边都有白边(默认情况下在右边，如果我使用 margin-right:0 则在左边)。如果我使用 margin:0 比它留在右边。尝试了我所知道的一切，但
html - 宽 div - 我能以某种方式摆脱滚动条吗？
我有一个带有背景图片的宽 div。 div 的宽度为 1100 像素，当浏览器窗口小于该宽度时，会出现滚动条。有什么办法可以避免滚动条吗？那不是任何黑客。现在我知道我可以把它放在 body image
html - 如何保持表格 100% 宽？
我有一个您可以访问的应用程序 here .当您打开应用程序时，只需单击加号按钮，您就会看到一个带有搜索栏的模态窗口。现在请执行这两个搜索: 搜索 1:AAA 搜索 2:AAE 您会看到，在 AAE
css - 为什么子输入字段比父 div 宽
这个问题在这里已经有了答案: Does element width include padding? (5 个答案) 关闭 7 年前。 HTML CSS .wrap{widt
cocoa - NSToolbarItem 宽 32 点
我正在尝试在工具栏中创建一个自定义显示，类似于 Xcode 工具栏中心的信息 Pane 。我们如何创建一个宽度超过 32 点的 NSToolbarItem？框架始终将其限制为 32 点，即使最小和
reshape R 中的数据(宽 -> 长)
我想将df1转换成df2 旧示例数据框 df1 df1 长)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/359
javascript - 上传前如何检查图像尺寸(宽 x 高)？
我正在使用 JavaScript 代码在 FireBase/FireStore 中上传图像。核心功能已经可以运行，我可以上传，但我还需要在上传之前检查图像的大小。这就是我很乐意获得帮助的地方。以下
python - ttk.Separator 设置长/宽
如何在 Tkinter 中设置/更改 ttk.Separator 对象的长度/宽度？ ttk.Separator(self, orient='horizontal').grid(c
html - Div 自动 100% 宽
我有一个简单的问题。为什么 a 不会自动调整其内容的大小？像这样: Test 返回 width:100%，尽管我希望“Test”这个词简单地居中。有什么想法吗？最佳答案您的问题与 HT

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 制作宽表，在移动设备上折叠成行