css - 如何为小于 600 的小屏幕创建响应表
问题描述
我需要帮助缩小表格的整体尺寸以适应所有屏幕尺寸,我已经涵盖了大多数尺寸,但无法缩小用于 600 或更小的移动屏幕尺寸。我主要在媒体查询中使用弹性框,但无法将尺寸缩小到 600 以内。我遗漏了一些东西,但不能指望它。查看我的代码,请告知我缺少的内容。我很感激任何帮助。我会踢自己我确定..
.table {
border-collapse: collapse;
border-spacing: 0;
margin: 0px auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.table td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.table th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.table .index-table {
border-color: inherit;
text-align: center;
vertical-align: middle
}
@media screen and (max-width: 767px) and (max-width: 1025px)and (max-width: 300px) {
.table {
overflow-x: auto;
}
.index-table {
width: auto !important;
}
}
<table class="table">
<tr>
<th class="index-table" colspan="15">Seattle</th>
</tr>
<tr>
<td class="index-table" colspan="15">Hinged Shutter Specification</td>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="3">Louver Size</td>
<td class="index-table" colspan="8">Width</td>
<td class="index-table" colspan="4" rowspan="2">Height</td>
</tr>
<tr>
<td class="index-table" colspan="2" rowspan="2">Min</td>
<td class="index-table" colspan="6">Max</td>
</tr>
<tr>
<td class="index-table" colspan="2">Single Hung</td>
<td class="index-table" colspan="2">Bi-Fold</td>
<td class="index-table" colspan="2">Multi-Fold</td>
<td class="index-table" colspan="2">Min.</td>
<td class="index-table" colspan="2">Max*</td>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">47mm</td>
<td class="index-table" colspan="2" rowspan="10">152mm</td>
<td class="index-table" colspan="2" rowspan="2">600mm</td>
<td class="index-table" colspan="2" rowspan="10">600mm</td>
<td class="index-table" colspan="2" rowspan="10">N/A</td>
<td class="index-table" colspan="2" rowspan="10">250mm</td>
<td class="index-table" colspan="2" rowspan="10">300mm</td>
</tr>
<tr>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">63mm</td>
<td class="index-table" colspan="2" rowspan="8">750mm</td>
</tr>
<tr>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">76mm</td>
</tr>
<tr>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">89mm</td>
</tr>
<tr>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">114mm</td>
</tr>
<tr>
</tr>
</table>
解决方案
您需要做的就是使您的网站/页面适合移动设备。为此,您必须设置视口,您可以通过添加:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在你的文件中的head
标签中,你很高兴。在此处html
阅读更多相关信息。
推荐阅读
- performance - 使用 clone_from_slice() 而不是 copy_from_slice() 的性能损失?
- angular - Angular Material mat-select 设置值后不刷新
- python - pymysql.err.OperationalError - 查询期间丢失与 MySQL 服务器的连接
- css - Chrome浏览器中的背景颜色奇怪但Edge中没有
- azure-logic-apps - 如何在 LogicApp 中为对象使用评估属性?
- java - java编译器是怎么看源码的?
- javascript - 将 HTML 添加到条形图的标签 - 图表 js
- visual-studio - XUnit - VS2019 - 具有 inlinedata 的理论在分组中不显示 DisplayName
- python - 给定直方图计算 PDF
- java - 无法从 android studio 中的片段启动另一个活动