問題與日曆表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; 
} 

...每列的寬度爲14.285％，即1/7。但你有8列！將其設置爲12.5％以獲得相同的寬度。

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