嵌套表中的Colgroup边框

Question

我正在寻找一种方法来构建我自己的http://fullcalendar.io/scheduler/

版本

HTML＆amp; CSS：

 table {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
   border-spacing: 0;
   font-size: 1em;
   border: 1px solid;
   border-color: grey;
 }
 tr {
   border-color: grey;
 }
 col {
   display: table-column;
   border: 1px solid;
 }
 .table-container {
   width: 800px;
   height: 600px;
 }

<div class="table-container">
  <table>
    <thead>
      <tr>
        <td width="200px"></td>
        <td>
          <table>
            <colgroup>
              <col style="width: 119.4px"></col>
              <col style="width: 119.4px"></col>
              <col style="width: 119.4px"></col>
              <col style="width: 119.4px"></col>
              <col style="width: 119.4px"></col>
            </colgroup>
            <tbody>
              <tr class="chrono">
                <th>1am</th>
                <th>2am</th>
                <th>3am</th>
                <th>4am</th>
                <th>5am</th>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td width="200px">
          <table>
            <tbody>
              <tr>
                <td>Schicht 1</td>
              </tr>
              <tr>
                <td>Schicht 2</td>
              </tr>
              <tr>
                <td>Schicht 3</td>
              </tr>
              <tr>
                <td>Schicht 4</td>
              </tr>
              <tr>
                <td>Schicht 5</td>
              </tr>
              <tr>
                <td>Schicht 6</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <div class="event-container" style="height: 22.5px"></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="event-container" style="height: 22.5px"></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="event-container" style="height: 22.5px"></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="event-container" style="height: 22.5px"></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="event-container" style="height: 22.5px"></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="event-container" style="height: 22.5px"></div>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

目前我正在构建表格：https://jsfiddle.net/qh75ksze/

我在创建网格时遇到了一些问题，例如右下角的字段。我有我的行，我有点想要列边框贯穿它们，如第一个链接所示。有没有办法做到这一点，因为我无法弄清楚他们是如何在网站上做到的。感谢