Question

我正在制作一个日历，然而，由于我使用的是8个colspan，所以我无法获得所有tr的适当宽度，这就是我到目前为止所做的，

<div class="booked-calendar-wrap large" style="height: 746px;">
 <table class="booked-calendar">
     <thead>
        <tr>
            <th colspan="8">

                <a href="#" data-goto="2015-06-01" class="page-left"><i class="fa fa-arrow-left"></i></a>
                <span class="monthName">
                    CURRENT WEEK</span>
                <a href="#" data-goto="2015-06-01" class="page-right"><i class="fa fa-arrow-right"></i></a>
            </th>
        </tr>
        <tr class="days">
            <th>Hour</th>
            <th>Sun</th>                
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </thead>
    <tbody>
    <tr class="week">
        <td  class="blur" style="height: 106.4px;"><span class="date" style="line-height: 106.4px;">
        <span class="number">12:00</span></span></td>
        <td  class="blur" style="height: 106.4px;"><span class="date" style="line-height: 106.4px;">
        <span class="number">26</span></span></td>
        <td  class="blur" style="height: 106.4px;"><span class="date"  style="line-height: 106.4px;">
        <span class="number">27</span></span></td>
        <td  class="blur" style="height: 106.4px;"><span class="date"  style="line-height: 106.4px;">
        <span class="number">28</span></span></td>
        <td  class="blur" style="height: 106.4px;"><span class="date"  style="line-height: 106.4px;">
        <span class="number">29</span></span></td>
        <td  class="blur" style="height: 106.4px;"><span class="date"  style="line-height: 106.4px;">
        <span class="number">30</span></span></td>
        <td class="prev-date" style="height: 106.4px;"><span class="date tooltipster tooltipstered" style="line-height: 106.4px;">
        <span class="number">1</span></span></td>
        <td class="prev-date" style="height: 106.4px;"><span class="date"  style="line-height: 106.4px;">
        <span class="number">2</span></span></td>
    </tr>



    </tbody>
</table>

这是我到目前为止所做的...... https://jsfiddle.net/nswckymb/

Answer 1

由于CSS中的这一行：

body table.booked-calendar th { 
    text-align:center; 
    position:relative; 
    font-size:20px; 
    width:14.285%; 
    border:1px solid; 
    padding:21px 0; 
    line-height:1; 
}

......每列的宽度为14.285％，即1/7。但是你有8列！将其设置为12.5％以获得相等的宽度。

https://jsfiddle.net/f9tu0acd/1/

日历表css的问题

1 个答案: