在预订时段时创建列范围

Question

我玩了几个小时，但是找不到一个好的解决方案，所以这就是我来这里的原因。

现在我正在尝试在行和员工上显示具有不同时隙（08：00-08：30 | 08：30-09：00 | 09：00-10：30 .. aso）的表在柱头上。

我们在这里：

$(document).on('click', '.free-date', function(e) {
  $(".btn-success").removeClass("selected");
  $(this).parent().addClass("selected");

});

.btn-success {
  cursor: pointer;
}

.btn-success.selected {
  background-color: steelblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="flex-fill w-100 table-bordered">
  <!--    -->
  <tbody>
    <tr>
      <th style="width: 25%">Time</th>
      <th class="text-center" style="width: 25%">Employee 1</th>
      <th class="text-center" style="width: 25%">Employee 2</th>
      <th class="text-center" style="width: 25%">Employee 3</th>
    </tr>

    <tr>
      <td>
        09:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        09:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        10:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        10:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        11:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        11:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        12:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        12:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        13:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        13:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        14:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        14:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        15:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        15:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        16:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        16:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        17:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        17:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
  </tbody>
</table>

代码是使用PHP动态生成的（我在Laravel中使用Controller）。

在显示表格时，我还传递了一个时隙，例如0：15h 0：30h 1：00h等。 我想实现通过css显示预订所需的（必需）位。 这意味着，当某人的时隙为01：00h时，如果他单击09时的09:00和09:30列，则应（例如）更改背景属性。 这样，用户可以在日历表上看到其保留的时间跨度。 这应该是动态的，这意味着当用户单击09点时，应该将背景设置为09:00和09:30。当他单击10点钟时，应将背景设置为10:00和10:30-> 09:00和09:30的旧选择将不再可见。

我尝试了以下操作：

-colspan： 没有解决，因为细胞一直移动。隐藏隐藏的单元格并跨越单击的单元格可能逻辑太多。

-使用position = absolute的div并在JQuery上设置高度： 出现的问题是，位置= absolute的div一直都在空间之外。认为这是一个很好的解决方案，但是需要更多的知识来完成它，也许有人可能会帮助我解决这个问题。

..我看着旧的全日历..看看它是如何完成的。 似乎全日历也使用position：absolute来计算高度/宽度。

也许有人给我提供了一个很好的/干净的解决方案或对此的提示？

谢谢。

干杯格雷格

Answer 1

您可以搜索索引位置，以将相同的规则应用于具有相同索引的子项的下一行。

示例

$(document).on("click", ".free-date", function(e) {
  var index = $(this).parent().index();
  $(".btn-success").removeClass("selected");
  $(this)
    .parent()
    .parent() //climb up to the parent row
    .next() // go to next row
    .children().eq(index) // every child with the same index
    .addClass("selected").html('booked');
  $(this).parent().addClass("selected").html('booked');
});

.btn-success {
  cursor: pointer;
}

.btn-success.selected {
  background-color: steelblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="flex-fill w-100 table-bordered">
  <!--    -->
  <tbody>
    <tr>
      <th style="width: 25%">Time</th>
      <th class="text-center" style="width: 25%">Employee 1</th>
      <th class="text-center" style="width: 25%">Employee 2</th>
      <th class="text-center" style="width: 25%">Employee 3</th>
    </tr>

    <tr>
      <td>
        09:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        09:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        10:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        10:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        11:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        11:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        12:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        12:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        13:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        13:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        14:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        14:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        15:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        15:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        16:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        16:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        17:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        17:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
  </tbody>
</table>

codepen to play with