javascript - 不同屏幕尺寸的表格看起来不一样
问题描述
我有一个文本填充表,分为 4 列(如下图所示),其中显示了所有子类别(2 级和 3 级子类别)。即使在我尝试使用 @media 查询使其具有响应性之后,该表在不同的屏幕尺寸(不同的笔记本电脑尺寸)和不同的设备上看起来也不统一,某些列看起来比其他列长。有没有办法解决这个问题,让所有的列看起来总是一致的?
我用过媒体
.tblcol {
width: 22%;
text-align: left;
font-size: 11px;
font-family: "Palatino Linotype";
}
.heading {
background-color: #790102;
color: #ffffff;
padding: 2px;
}
a {
text-decoration: none;
}
.slogan {
color: #790102;
letter-spacing: 8px;
font-size: 18px
}
@media(max-width:1023px) {
.categoryTable1 {
width: 500px;
}
}
@media(min-width:1024px) and (max-width:1010px) {
.categoryTable1 {
width: 680px;
}
}
@media(min-width:1011px) and (max-width:1300px) {
.categoryTable1 {
width: 740px;
}
}
@media(min-width:1224px) and (max-width:1400px) {
.categoryTable1 {
width: 850px;
}
}
@media(min-width:1410px) {
.categoryTable1 {
width: 970px;
}
}
<table class="categoryTable1">
<tr>
<td colspan="4">
<p style="text-align:center" class="slogan"> 1500+ ITEMS * 45 PRODUCTS * 14 CATEGORIES </p>
</td>
</tr>
<tr>
<td width="25%" class="tblcol">
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES </span> </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self"> Bespoke Tailoring for Women </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self"> Bespoke Tailoring for Men </a><br>
<a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self"> Made to Measure for Juniors </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES </span> </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self"> Bespoke Tailoring for Women </a><br>
</td>
<td width="25%" class="tblcol">
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES </span> </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self"> Bespoke Tailoring for Women </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self"> Bespoke Tailoring for Men </a><br>
<a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self"> Made to Measure for Juniors </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES </span> </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self"> Bespoke Tailoring for Women </a><br>
</td>
<td width="25%" class="tblcol">
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES </span> </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self"> Bespoke Tailoring for Women </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self"> Bespoke Tailoring for Men </a><br>
<a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self"> Made to Measure for Juniors </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES </span> </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self"> Bespoke Tailoring for Women </a><br>
</td>
<td width="25%" class="tblcol">
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES </span> </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self"> Bespoke Tailoring for Women </a><br>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self"> Bespoke Tailoring for Men </a><br>
<a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self"> Made to Measure for Juniors </a><br>
</td>
</tr>
</table>
查询以根据需要更新表宽度以适应大小。但是当表格宽度减小时;4 列是不均匀的:有些比其他的大得多
解决方案
.slogan {
color: #790102;
letter-spacing: 8px;
font-size: 18px
}
.heading {
background-color: #790102;
color: #ffffff;
padding: 2px;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
text-align: left;
padding: 8px;
font-size: 11px;
font-family: "Palatino Linotype";
}
<table class="categoryTable1">
<tr>
<td colspan="4">
<p style="text-align:center" class="slogan">1500+ ITEMS * 45 PRODUCTS * 14 CATEGORIES</p>
</td>
</tr>
<tr>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
<span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
<span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
<span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
<span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">Bespoke Tailoring for Men</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">Bespoke Tailoring for Men</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">Bespoke Tailoring for Men</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">Bespoke Tailoring for Men</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">Made to Measure for Juniors</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">Made to Measure for Juniors</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">Made to Measure for Juniors</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">Made to Measure for Juniors</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
<span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
<span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
<span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
</td>
<td>
<a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
</td>
</tr>
</table>
现在所有的列看起来都是统一的。HTML 元素定义表格中的一行单元格。然后可以使用(数据单元)和(标题单元)元素的混合来建立行的单元。您可以使用以下链接了解有关 HTML 表格的更多信息 点击这里
推荐阅读
- cassandra - Cassandra存在细微版本差异时,节点操作及不同版本升级问题
- excel - 如果单元格包含特定值,则以红色突出显示行到特定列
- gitlab - 为什么我的 gitlab 管道中的一个阶段被省略了?
- typescript - 如何从 TypeScript 中的枚举创建类型化的模板文字?
- python - 用python计算无限量给定函数的无限近似值作为参数
- c# - 如何在 C# 中将库存保存在 JSONString 中
- java - Android.os.FileUriExposedException 错误,Android Studio
- swift - ParseSwift ParseObject QueryConstraint
- php - 使用 Microsoft Graph API (PHP) 更新用户
- java - 我尝试了几个选项,但仍然出现此错误:org.testng.TestNGException:检查以确保它可以被实例化