如何使列表生成的html表具有响应性

How to make html table made by list responsive?

本文关键字：响应 html 何使 列表      更新时间：2023-09-26

我用ul li制作了一个带有列表的表。这是我的html代码。

<div style="" class="first_calendar clendar-wrapper calendar-1">
     <ul class="calendar ">
       <li class="calen-title"><a href="#">Sunday  <br>Mar 22</a></li>               
       <li class="" style="min-height:40px;"><a data-day="7" rel="21" href="#"> 6:00 am</a> </li>
       <li class="" style="min-height:40px;"><a data-day="7" rel="22" href="#"> 6:15 am</a> </li>
    </ul>
    <ul class="calendar ">
       <li class="calen-title"><a href="#">Monday  <br>Mar 23</a></li>
       <li class="" style="min-height:40px;"><a data-day="1" rel="21" href="#"> 6:00 am</a> </li>
       <li class="" style="min-height:40px;"><a data-day="1" rel="22" href="#"> 6:15 am</a> </li>
    </ul>
    <ul class="calendar ">
       <li class="calen-title"><a href="#">Tuesday  <br>Mar 24</a></li>
       <li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
       <li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
    </ul>
</div>

这是我的css代码。

.calendar{
    margin: 0;
    padding: 0;
    /*width: 40px;*/
    list-style: none;
    float:left;
}
.clendar-wrapper{
    /*float: left;*/
    /*background-image: url("../img/table_bg.png");*/
    background-position: 0 -58px;
    /*float: left;*/
}
.clendar-wrapper{
    display: none;
    display: none;
    width: 100%;
    max-height:350px;   overflow-x:hidden ;   padding-bottom:10px; 
}
.table-responsive {
    width: 918px;
    /*border:1px solid red;*/
    background-color: #FFFFFF;
    overflow: visible;
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .clendar-wrapper{ 
        width: 100%;
        height:auto;   
    } /* your css rules for ipad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    .clendar-wrapper{   
        /*width: 100%;*/
        height:auto;   
    } /* your css rules for ipad landscape */
}
.calendar-1{
    display: block;
}
.prev-table{
    display: none;
}
.login_register a {
    color:white;
}
.calen-title {
    background-color: #D9E8F4 !important;
}
.calen-title a{
    font-size: 16px;
    color: #222; 
    font-weight: bold;
}
.calendar li{
    padding: 8px;
    border: 1px solid #ddd;
}
.calendar li a {
    color: #222;
    font-size: 16px;
}

.calendar li:nth-child(2n+2) {
    background-color: #f9f9f9;
}
.pagi_list .pre_btn, .pagi_list .nex_btn{
    margin: 0px;
}
.last_link, .first_link {
    font-size: 35px;
    font-weight: bold;
    line-height: 0;
    position: relative;
    top: 5px;
    color:#d65c4f;
}

它是在引导程序上编码的。当我打开它的小分辨率设备列下拉。在这里我创建了一个演示链接点击这里打开。请告诉我如何使这个日历具有响应性。

提前谢谢。

使用媒体查询时，通常不明智的做法是设置设备的高度，而只设置宽度。设备的方向设置了宽度，因此如果您在纵向和横向之间切换，媒体查询仍然有效。

你可以使用100%但最大为700像素的日历包装器，这使得每天100像素的内容都能完美地融入其中，如果屏幕小于700像素，你可以将它们垂直排列。我在这里仅使用一个简单的媒体查询就抛出了一个示例>https://jsfiddle.net/pfg1dxfy/您将看到，通过抓取javascript窗口和结果窗口之间的条并调整其大小，表将根据宽度进行更改。

我还添加了一个简单的清晰修复，当浮动元素时需要这个。在CSS中，它是.clear｛clear:both；｝，然后在的所有浮动元素之后包含它

.calendar{
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
    width: 100px;
}
.clendar-wrapper{
    width: 100%;
    max-width: 700px;
    margin: auto;
}
@media (max-width: 699px) {
    .calendar{
        width: 100%;
        float: none;
        margin: 30px 0;
    }
}
相关文章：