jquery - 日历表 css 问题

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/