日历表css问题

Question

我在写日历，但是，我无法得到所有tr的适当宽度，因为我使用的是8 colspan，这是我到目前为止所做的，

<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; 
}

...each柱宽为14.285%，为1/7。但你有8列！将其设置为12.5%以获得等宽。

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