javascript - 如何在调整窗口大小时使表格响应?
问题描述
我有一张桌子,我正试图让它响应。
当我从右到左调整大小时,它会完美缩小
在小窗口中,我点击刷新并尝试调整它的大小
这就是我现在为 CSS 所做的
@media only screen and (max-width: 1555px) {
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
}
@media only screen and (max-width: 1080px) {
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: none;
}
}
@media only screen and (max-width: 840px) {
td:nth-child(5),th:nth-child(5) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
}
注意:我在所有浏览器类型上都试过这个:Chrome、Firefox、Safari,结果相同。
尝试#2
@media (min-width: 1300px) and (max-width: 1555px) {
th {
color:brown;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
}
@media (min-width: 1200px) and (max-width: 1300px) {
th {
color:brown;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
}
@media (min-width: 840px) and (max-width: 1200px) {
th {
color:red;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
}
@media (min-width: 520px) and (max-width: 840px) {
th {
color:orange;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: none;
}
}
@media (max-width: 520px) {
th {
color:yellow;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
td:nth-child(2),th:nth-child(2) {
display: none;
}
}
当我展开时,我仍然看到侧面的空间
解决方案
我建议您使用 display: table-cell启用所有表格数据 ( td
) 和表格标题 ( )。th
@media (min-width: 1300px) and (max-width: 1555px) {
th, td {
display: table-cell;
}
th {
color:brown;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
}
@media (min-width: 1200px) and (max-width: 1300px) {
th, td {
display: table-cell;
}
th {
color:brown;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
}
@media (min-width: 840px) and (max-width: 1200px) {
th, td {
display: table-cell;
}
th {
color:red;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
}
@media (min-width: 520px) and (max-width: 840px) {
th, td {
display: table-cell;
}
th {
color:orange;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: none;
}
}
@media (max-width: 520px) {
th, td {
display: table-cell;
}
th {
color:yellow;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
td:nth-child(2),th:nth-child(2) {
display: none;
}
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
@media (min-width: 520px) and (max-width: 840px) {
th, td {
display: table-cell;
}
th {
color:orange;
}
td:nth-child(3),th:nth-child(3) {
display: none;
}
}
@media (max-width: 520px) {
th, td {
display: table-cell;
}
th {
color:yellow;
}
td:nth-child(2),th:nth-child(2) {
display: none;
}
td:nth-child(3),th:nth-child(3) {
display: none;
}
}
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
推荐阅读
- reactjs - 一次只选择一个计划 React State Hook
- android - 在 Activity 中调用片段方法不起作用 kotlin
- python - 如何组合几个 base64 音频块(来自麦克风)
- java - Android上的Postgresql JDBC连接错误
- reactjs - 使用 ffmpeg 的 Asp.net 核心和反应网络应用视频流
- powershell - Measure-Object -Maximum 不提供与输入相同的输出格式
- html - 使用通配符的 HTML 搜索功能 - shopify
- jquery - 光滑的滑块在 IE11 中将图像堆叠在一起,调试器向 jquery.min.js 提供错误
- flutter - 如何在 Box Decoartion 中将背景设置为透明?
- docker - 在 github ci 中进入 docker 容器之前如何在主机中运行命令