我有一张桌子,我正在尝试使其响应。
当我从右向左调整大小时,它会完美缩小
在小窗口时,我点击了刷新,然后尝试重新调整它的大小
这就是我现在为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,结果相同。
@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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句