Question

我试图在屏幕宽度达到某个点后重新排列一个相对较大的表（使用CSS媒体查询），当浏览器窗口被压扁时，看起来像这样（见下图）：

Desired table format

我已经成功删除了不需要的行，并获得了它的基本布局。

问题是：
一周中每天下面的内联块元素需要适合表格的宽度，到目前为止没有任何工作，不是flex（可能我没有正确使用它）或溢出或边框。

HTML （只是表格）

    <table>
        <thead>
            <tr>
                <th>DAY</th>
                <th style="width:300px;">CLASS</th>
                <th>TIME</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Monday</td>
                <td>Endurance biking</td>
                <td>9am-1pm</td>
                <td><a href="#bannerMain">Register</a></td>
            </tr>
            <tr>
                <td>Tuesday</td>
                <td>Speed biking</td>
                <td>2pm-4pm</td>
                <td><a href="#bannerMain">Register</a></td>
            </tr>
            <tr class="toBeDeleted">
                <td>Wednesday</td>
                <td colspan="3" class="noClasses">No classes</td>
            </tr>
            <tr>
                <td>Thursday</td>
                <td>Speed biking</td>
                <td>3pm-5pm</td>
                <td><a href="#bannerMain">Register</a></td>
            </tr>
            <tr class="toBeDeleted">
                <td>Friday</td>
                <td colspan="3" class="noClasses">No classes</td>
            </tr>
            <tr>
                <td>Saturday</td>
                <td>Endurance biking</td>
                <td>9am-1pm</td>
                <td><a href="#bannerMain">Register</a></td>
            </tr>
            <tr>
                <td>Sunday</td>
                <td>Endurance biking</td>
                <td>10am-4pm</td>
                <td><a href="#bannerMain">Register</a></td>
            </tr>
        </tbody>
    </table>

CSS （删除2行和“thead”，为每行的每个第一个单元格着色，并将该单元格放在其相应行的其余部分之上）

@media only screen and (max-width: 530px){
thead, .pasDeClasses{
    display: none;
}
td:first-child{
    background-color: #4080bc;
    color: white;
    font-family: Arial;
    display: block;
}
tr > td{
    border-left: 1px solid  white;
    max-width: 100%;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px; 
}
table{
    min-width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial;
}    
}    
thead{    
    background-color: #4080bc;
    color: white;
}    

td{
background-color: #d6d6d6;
padding-top: 10px; padding-bottom: 10px; padding-left: 30px; padding-right: 
30px;
text-align: center;
}

Answer 1

您可以尝试绝对定位父母底部的最后tr元素。注意父position:relative

上的display:block和tr

tr{
  display:block;position:relative;padding-bottom:20px
}
tr td:last-child{
  position:absolute;bottom:0;
  width:100%;height:20px
}

这可以使用一个规则，即相对定位元素中的绝对定位元素将“停靠”到相对定位的父元素，而不是视口。

使用媒体查询完全重新排列表元素

1 个答案: