Slick.js carousel inside

I have an issue with Slick.js inside a td. It does not show up in the correct way. You can see how it behaves in the codepen, https://codepen.io/chrplatou/pen/JjjVbVq.

I do not know if its possible to use slick inside a td but if anyone has an idea on how to fix it, it would be much appreciated. Thanks in advance!

It behaves the same way with actual pictures.

<link href="~/Content/slick.css" rel="stylesheet" type="text/css" />
<link href="~/Content/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery.js"></script>

<table>
  <thead>
    <th>Weighing-num</th>
    <th>Lincense</th>
    <th>Client</th>
    <th>Deviation</th>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <td>128374</td>
      <td>HJ73264</td>
      <td>Company</td>
      <td>False -Click the row</td>
    </tr>
    <tr class="hidden-img" style="display: none">
      <td colspan="4">
        <div class="single-item">
          <div>
            <h1>Content1</h1>
          </div>
          <div>
            <p>Content2</p>
          </div>
        </div>
      </td>
    </tr>
    <tr class="hidden-row" style="display: none">
      <td colspan="3">
        <button id="img-btn">Show pictures</button>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>
<script src="~/slick/slick.js"></script>

jQuery:

$(document).ready(function(){
  $(".clickable-row").click(function(){
    $(".hidden-row").toggle();
  })
})

$(document).ready(function(){
  $("#img-btn").click(function() {
    $(".hidden-img").toggle();
  })
})

$(document).ready(function () {
        $('.single-item').slick({
            arrows: true,
            dots: true,
            infinte: true
        });
    });