title: How can I overlay text to multiple table cells?
body: <p>I want to overlay text to my multiple table cells. In my case to the cells with data-date from <code>2018-04-02</code> to <code>2018-04-04</code>. So as a result it should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zkL0S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zkL0S.png" alt="example"></a></p>
  
  <p>But I am only able to append the text to one cell. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function() {
    jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
  });
  
  
  $('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);
  
  
  $('[data-date="2018-04-02"]').css("background-color", "yellow");
  $('[data-date="2018-04-03"]').css("background-color", "yellow");
  $('[data-date="2018-04-04"]').css("background-color", "yellow");
  
  $('[data-date="2018-04-02"]').append("mycontent");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-scroll {
    position: relative;
    margin: auto;
    overflow: hidden;
  }
  
  .table-wrap {
    width: 100%;
    overflow: auto;
  }
  
  .table-scroll table {
    width: 100%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
  }
  
  .table-scroll th,
  .table-scroll td {
    padding: 5px 10px;
    white-space: nowrap;
    vertical-align: top;
  }
  
  .clone {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  
  .clone th,
  .clone td {
    visibility: hidden
  }
  
  .clone td,
  .clone th {
    border-color: transparent
  }
  
  .clone tbody th {
    visibility: visible;
  }
  
  .clone .fixed-side {
    visibility: visible;
    background-color: #fff;
    font-weight: normal;
    border: none;
    border-right: 2px solid #f4f4f4;
  }
  
  .clone thead,
  .clone tfoot {
    background: transparent;
  }
  
  .gantt-h {
    font-weight: normal;
    color: #b0b0b0;
    border-right: 2px solid #f4f4f4;
  }
  
  .last {
    border-right: 2px solid #f4f4f4;
  }
  
  .gantt td {
    border-right: 2px solid #f4f4f4;
  }
  
  .today{
  background-color:pink;
  width:100px;
  cursor:pointer
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;div id="table-scroll" class="table-scroll"&gt;
    &lt;div class="table-wrap"&gt;
      &lt;table class="main-table table gantt"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th class="fixed-side" scope="col" class="left-h" style="border-bottom:2px solid #f4f4f4;color:#b0b0b0"&gt;Task&lt;/th&gt;
  
            &lt;th scope="col" class="gantt-h" style="font-weight:normal;color:#b0b0b0;"&gt;30 Mar&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;31 Mar&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;01 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;02 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;03 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;04 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;05 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;06 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;07 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;08 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;09 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;10 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;11 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;12 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;13 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;14 Apr&lt;/th&gt;
            &lt;th scope="col" class="gantt-h"&gt;15 Apr&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th class="fixed-side project"&gt;&lt;i class="fa fa-folder-open-o" style="color:#9e9e9e"&gt;&lt;/i&gt; Projekt 1&lt;/th&gt;
  
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th class="fixed-side" style="padding-left:27px"&gt;&lt;i class="fa fa-file-o" style="color:#9e9e9e"&gt;&lt;/i&gt; blue&lt;/th&gt;
            &lt;td data-row="2" data-date="2018-03-30"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-03-31"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-04-01"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-04-02"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-04-03"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-04-04"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-04-05"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-04-06"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-04-07"&gt;&lt;/td&gt;
            &lt;td data-row="2" data-date="2018-04-08"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th class="fixed-side" style="padding-left:27px"&gt;&lt;i class="fa fa-file-o" style="color:#9e9e9e"&gt;&lt;/i&gt; green&lt;/th&gt;
  
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th class="fixed-side" style="padding-left:27px"&gt;&lt;i class="fa fa-file-o" style="color:#9e9e9e"&gt;&lt;/i&gt; yellow&lt;/th&gt;
  
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th class="fixed-side" style="padding-left:27px"&gt;&lt;i class="fa fa-file-o" style="color:#9e9e9e"&gt;&lt;/i&gt; pink&lt;/th&gt;
  
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th class="fixed-side" style="padding-left:27px"&gt;&lt;i class="fa fa-file-o" style="color:#9e9e9e"&gt;&lt;/i&gt; orange&lt;/th&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>