使用窗口调整表格和文本的大小

Resize table AND text inside with window

本文关键字：文本 表格 窗口 调整      更新时间：2023-09-26

我正在尝试使用窗口大小重新调整表格及其文本的大小，最好只使用 html 和 css，但如果需要，可以尝试 js。我见过几个类似的例子，但没有一个完全符合我的情况。如果我需要重写表格来完成这项工作，我没有问题。

JSFiddle

<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>
相关文章：