gpt4 book ai didi

javascript - 如何在调整窗口大小时使表格响应?

转载 作者:行者123 更新时间:2023-12-03 18:20:37 25 4
gpt4 key购买 nike

我有一张 table ,我正在努力让它响应。
当我从右到左调整大小时,它会完美缩小
enter image description here
在小窗口时,我点击了刷新 并尝试调整它的大小
enter image description here
这就是我现在为 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>

或者
JS fiddle link

关于javascript - 如何在调整窗口大小时使表格响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64789710/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com