我正在尝试使用窗口大小调整表格及其文本的大小，最好只使用 html 和 css，但如果需要可以尝试 js。我见过几个类似的例子，但没有一个完全符合我的情况。如果我需要重写表格来完成这项工作，我对此没有问题。
<section id="scheduleInfo">
<h1 style="margin-bottom: 0px;"><a href="members_home.html" style="text-decoration: none;"><-Back</a></h1>
<h1 style="text-align:center;">Your Personalized Maintenance Schedule</h1>
<table class="schedule" border="1" summary="scheduleSummary" align="center">
<caption></caption>
<colgroup>
<col class="maintItem" />
<col class="maint1" />
<col class="maint2" />
<col class="maint3" />
<col class="maint4" />
<col class="maint5" />
<col class="maint6" />
<col class="maint7" />
<col class="maint8" />
<col class="maint9" />
<col class="maint10" />
</colgroup>
<thead id="maint">
<tr>
<th>Maintenance Item</th>
<th>March 2015 Maintenance</th>
<th>May 2015 Maintenance</th>
<th>August 2015 Maintenance</th>
<th>October 2015 Maintenance</th>
<th>December 2015 Maintenance</th>
<th>March 2016 Maintenance</th>
<th>May 2016 Maintenance</th>
<th>August 2016 Maintenance</th>
<th>October 2016 Maintenance</th>
<th>December 2016 Maintenance</th>
</tr>
</thead>
<tbody>
<tr>
<th>Pollen Filter</th>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<th>Air Filter</th>
<td colspan="5"></td>
<td colspan="5"></td>
</tr>
<tr>
<th>Brake Flush</th>
<td colspan="5"></td>
<td colspan="5"></td>
</tr>
<tr>
<th>Transmission Flush</th>
<td colspan="10"></td>
</tr>
</tbody>
</table>
</section>
CSS
table.schedule {
border: 4px solid rgba(166,206,57,.8);
border-radius: 6px;
border-collapse: collapse;
text-align: center;
width: 60%;
margin-bottom: 15px;
}
table.schedule thead {
background-color: white;
color: black;
font-family: 'Playball', cursive;
font-size: 110%;
border-bottom: 5px solid grey;
}
table.schedule td {
background: -webkit-linear-gradient(left, green, yellow, red);
}
table.schedule tbody th {
font-size: 150%;
padding-bottom: 15px;
padding-top: 15px;
}
table.schedule td {
border: 2px solid rgb(166, 206, 57);
}
table.schedule th {
padding: 0px 20px 0px;
}
最佳答案
如果您的浏览器支持，您可以使用媒体查询。这是一个例子，我用它们来改变一些属性(但不是全部)。代码包含解释性注释。
<html>
<head>
<style>
/* values in here will apply when the browser width is 600px or less */
@media screen and (max-width: 600px) {
table.schedule tbody th {
font-size: 80%;
padding-bottom: 5px;
padding-top: 5px;
}
}
/* values in here will apply when the browser width is between 601px and 800px inclusive */
@media screen and (min-width:601px) and (max-width: 800px) {
table.schedule tbody th {
font-size: 150%;
padding-bottom: 15px;
padding-top: 15px;
}
}
/* remaining values will apply as normal */
table.schedule {
border: 4px solid rgba(166,206,57,.8);
border-radius: 6px;
border-collapse: collapse;
text-align: center;
width: 60%;
margin-bottom: 15px;
}
table.schedule thead {
background-color: white;
color: black;
font-family: 'Playball', cursive;
font-size: 110%;
border-bottom: 5px solid grey;
}
table.schedule td {
background: -webkit-linear-gradient(left, green, yellow, red);
}
table.schedule td {
border: 2px solid rgb(166, 206, 57);
}
table.schedule th {
padding: 0px 20px 0px;
}
</style>
</head>
<body>
<section id="scheduleInfo">
<h1 style="margin-bottom: 0px;"><a href="members_home.html" style="text-decoration: none;"><-Back</a></h1>
<h1 style="text-align:center;">Your Personalized Maintenance Schedule</h1>
<table class="schedule" border="1" summary="scheduleSummary" align="center">
<caption></caption>
<colgroup>
<col class="maintItem" />
<col class="maint1" />
<col class="maint2" />
<col class="maint3" />
<col class="maint4" />
<col class="maint5" />
<col class="maint6" />
<col class="maint7" />
<col class="maint8" />
<col class="maint9" />
<col class="maint10" />
</colgroup>
<thead id="maint">
<tr>
<th>Maintenance Item</th>
<th>March 2015 Maintenance</th>
<th>May 2015 Maintenance</th>
<th>August 2015 Maintenance</th>
<th>October 2015 Maintenance</th>
<th>December 2015 Maintenance</th>
<th>March 2016 Maintenance</th>
<th>May 2016 Maintenance</th>
<th>August 2016 Maintenance</th>
<th>October 2016 Maintenance</th>
<th>December 2016 Maintenance</th>
</tr>
</thead>
<tbody>
<tr>
<th>Pollen Filter</th>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<th>Air Filter</th>
<td colspan="5"></td>
<td colspan="5"></td>
</tr>
<tr>
<th>Brake Flush</th>
<td colspan="5"></td>
<td colspan="5"></td>
</tr>
<tr>
<th>Transmission Flush</th>
<td colspan="10"></td>
</tr>
</tbody>
</table>
</section>
</body>
关于javascript - 使用窗口调整表格和文本的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27338938/