Проблема с календарной таблицей 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/