JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<table class="waffle" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th class="row-header freezebar-origin-ltr"></th>
      <th id="0C0" style="width:246px;" class="column-headers-background">A</th>
      <th id="0C1" style="width:144px;" class="column-headers-background">B</th>
      <th id="0C2" style="width:173px;" class="column-headers-background">C</th>
    </tr>
  </thead>
  <tbody>
    <tr style="height: 20px">
      <th id="0R0" style="height: 20px;" class="row-headers-background">
        <div class="row-header-wrapper" style="line-height: 20px">1</div>
      </th>
      <td class="s0" dir="ltr">CUT &amp; BLOWDRY</td>
      <td class="s1" dir="ltr">£30</td>
      <td class="s2">C Y</td>
    </tr>
    <tr style="height: 20px">
      <th id="0R1" style="height: 20px;" class="row-headers-background">
        <div class="row-header-wrapper" style="line-height: 20px">2</div>
      </th>
      <td class="s0" dir="ltr">BLOWDRY</td>
      <td class="s1" dir="ltr">£20</td>
      <td></td>
    </tr>
    <tr style="height: 20px">
      <th id="0R2" style="height: 20px;" class="row-headers-background">
        <div class="row-header-wrapper" style="line-height: 20px">3</div>
      </th>
      <td class="s0" dir="ltr">BLOWDRY WITH EXTENSIONS</td>
      <td class="s1" dir="ltr">£25</td>
      <td></td>
    </tr>
    <tr style="height: 20px">
      <th id="0R3" style="height: 20px;" class="row-headers-background">
        <div class="row-header-wrapper" style="line-height: 20px">4</div>
      </th>
      <td class="s0" dir="ltr">MENS</td>
      <td class="s1" dir="ltr">£20</td>
      <td></td>
    </tr>
    <tr style="height: 20px">
      <th id="0R4" style="height: 20px;" class="row-headers-background">
        <div class="row-header-wrapper" style="line-height: 20px">5</div>
      </th>
      <td class="s0" dir="ltr">ROOTS</td>
      <td class="s1" dir="ltr">£35</td>
      <td></td>
    </tr>
    <tr style="height: 20px">
      <th id="0R5" style="height:...

JavaScript

$(document).ready(function() {
  $('td').each(function() {

    let text = $(this).text();
    $(this).text(text.split('').join(' '));

  });
});