Bootstrap table 日历

Question

我正在尝试使用 table 为有视力障碍的人创建一个 Bootstrap 4 日历，该日历将使用浏览器的全宽和全高显示。在某人的帮助下，我在另一个 post 中取得了成功，但我使用了一个带有绝对定位的跨度，我认为这有点老套。我想使用 Bootstap 4 SVG 箭头 select header 区域中的“上一个”和“下一个”月份，但日历的最后一行一直在 cut-off.

以前的解决方案使用 span 但适用于全宽和全高： https://jsfiddle.net/2gb3a4ty/

目前截断最后一行的方案： https://jsfiddle.net/da79hwqu/

index.html

<table  class="table table-bordered vh-100">
  <thead>
    <tr id="monthHeader">

      <div id="header" class="d-flex align-middle justify-content-around mt-3">   
        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="bi bi-arrow-left-square" id="prev" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
        </svg>      
        <h1 class="d-inline-block align-middle" id="month">January</h1>
        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="bi bi-arrow-right-square" id="next" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
        </svg>
      </div>

    </tr>
    
        <tr class="text-center" id="weekHeader">
          <th class="headerDay">Sun</th>
          <th class="headerDay">Mon</th>
          <th class="headerDay">Tues</th>
          <th class="headerDay">Wed</th>
          <th class="headerDay">Thur</th>
          <th class="headerDay">Fri</th>
          <th class="headerDay">Sat</th>
        </tr>    
    
  </thead>
  <tbody>
        <tr>
          <td class="day">1</td>
          <td class="day">2</td>
          <td class="day">3</td>
          <td class="day">4</td>
          <td class="day">5</td>
          <td class="day">6</td>
          <td class="day">7</td>
        </tr>

        <tr>
          <td class="day">8</td>
          <td class="day">9</td>
          <td class="day">10</td>
          <td class="day">11</td>
          <td class="day">12</td>
          <td class="day">13</td>
          <td class="day">14</td>
        </tr>

        <tr>
          <td class="day">15</td>
          <td class="day">16</td>
          <td class="day">17</td>
          <td class="day">18</td>
          <td class="day">19</td>
          <td class="day">20</td>
          <td class="day">21</td>
        </tr>

        <tr>
          <td class="day">22</td>
          <td class="day">23</td>
          <td class="day">24</td>
          <td class="day">25</td>
          <td class="day">26</td>
          <td class="day">27</td>
          <td class="day">28</td>
        </tr>
        
        <tr>
          <td class="day">29</td>
          <td class="day">30</td>
          <td class="day">31</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
  </tbody>
</table>

style.css

body {
  overflow: hidden;
}

#weekHeader {
  height: 2%;  
}

.headerDay {
  width: calc(100vw / 7);
}

#prev:hover, #next:hover, .day{
  cursor: pointer;
}

Answer 1

浏览器正在自动更正您的 thead 的 tr 中缺失的 th，并将您的 div#header 放在 table 之外。

您只需要正确使用 thead 标签，这需要 tr 和 th 标签。您可以通过使用 colspan="7" 将 tr 更改为 th 来使其与 flex-box 一起使用，但是浏览器将自动更正丢失的 tr.

你可以试试这个：

<thead>
    <tr id="monthHeader">
        <th colspan="7" id="header" class="text-center">...</th>
    </tr>
</thead>

d-flex 不适用于 th 标签，因为它是一种不同类型的显示“table-cell”，它使用 colspan。

DEMO

Bootstrap table 日历

Bootstrap table for calendar

css

calendar

html-table

bootstrap-4