Изменение цвета шрифта строк и столбцов с помощью флажков

Question

Я ищу способ изменить цвета шрифта содержимого строк и столбцов таблицы с помощью установленного флажка вверху и слева от таблицы. поэтому, когда флажок установлен, содержимое соответствующей строки или столбца меняет цвет шрифта. Мне не нужно несколько цветов. Мне просто нужно изменить цвет шрифта только на назначенный цвет. Несколько строк флажка и столбца флажки могут быть нажаты вместе, это не должно вызвать осложнений. Спасибо за вашу помощь!

Вот также jsfiddle: https://jsfiddle.net/u6xzfnq7/

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

  

 <table class="tb">
    <tbody>
        <tr>
            <td></td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check1" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check2" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check3" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check4" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check5" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check6" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check7" /> Switch</label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check8" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check10" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check11" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check12" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check13" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check14" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check15" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check16" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check17" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check18" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check19" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check20" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check21" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check22" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check23" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
    </tbody>
</table>

Answer 1

Я знаю, что вы уже приняли ответ Эдди, но здесь он все равно.
Чтобы улучшить свой ответ, вот фрагмент, показывающий, что я сделаю.
Пожалуйста, уделите время рассмотрению методов, используемых в javascript, это единственное, что я изменил по сравнению с кодом Эдди. Я добавил комментарии, чтобы прояснить ситуацию.

Плюс, я добавил что-то смешное в CSS!

// Listen to checkboxes change on table
$('.tb input[type="checkbox"]').change(function() {

  // Remove the class on all trs and tds
  $('.tb tr, .tb td').removeClass('selected');

  // Add the class only to checked trs (rows)
  // Note that there is no need to use the .find() method
  // You can just move the whole selection string in the $() query
  $('.tb tr>td:first-child input[type="checkbox"]:checked').each(function() {
    // closest() is a really nice method, consider it! Way clearer than .parent().parent()…
    $(this).closest('tr').addClass('selected');
  })

  // Add the class only to checked tds (columns)
  var tds = $('.tb tr:first-child td');
  $('.tb tr:first-child input[type="checkbox"]:checked').closest('td').each(function() {
    // The each only contains selected tds, not all of them
    // Get index for each of the selecteds (+1 because index starts at 0) and style them!
    $('.tb tr>td:nth-child(' + (tds.index($(this)) + 1) + ')').addClass('selected');
  })
})

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

.selected {
  color: red;
}


/* The funny thing is that we could stylize intersections */

.selected .selected {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb">
  <tbody>
    <tr>
      <td></td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
				<input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
        <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
  </tbody>
</table>

Подробнее о .closest(): https://api.jquery.com/closest/
Подробнее о .index(): https://api.jquery.com/index/

Надеюсь, это поможет.

Answer 2

Я не уверен, что это было то, что вы были после. Вот скрипка .

<table class="tb">
   <tbody>
      <tr>
         <td></td>
         <td>
            <label class="color-switch">
            <input data-col="0" type="checkbox" /> Switch</label>
         </td>
         <td>
            <label class="color-switch">
            <input data-col="1" type="checkbox" /> Switch</label>
         </td>
      </tr>
      <tr>
         <td>
            <label class="color-switch">
            <input type="checkbox" data-row="0" /> Switch</label>
         </td>
         <td data-row="0" data-col="0">Text</td>
         <td data-row="0" data-col="1">Text</td>
      </tr>
      <tr>
         <td>
            <label class="color-switch">
            <input type="checkbox" data-row="1" /> Switch</label>
         </td>
        <td data-row="1" data-col="0">Text</td>
         <td data-row="1" data-col="1">Text</td>
      </tr>

   </tbody>
</table>
<style type="text/css">
   .tb {
       font-size: 12px;
       border: 1px solid #CCC;
       font-family: Arial, Helvetica, sans-serif;
   }
   .tb td {
       padding: 4px;
       margin: 3px;
       border: 1px solid #CCC;
   }
   .nochange,
   tr {
    background-color: white;
   }

   td.row-checked.col-checked{
    color: red;
   }
</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    var $inputCheckboxRow = $('input[type="checkbox"][data-row]');
    var $inputCheckboxCol =  $('input[type="checkbox"][data-col]');

    $inputCheckboxRow.on('change', onInputCheckBoxRowChange );
    $inputCheckboxCol.on('change', onInputCheckboxColChange );

    function onInputCheckBoxRowChange(){
        let row = $(this).data('row');
        if($(this).is(':checked')){
            $('td[data-row='+ row +']').addClass('row-checked')
        }else{
            $('td[data-row='+ row +']').removeClass('row-checked')
        }
    }

    function onInputCheckboxColChange(){
        let col = $(this).data('col');
        if($(this).is(':checked')){
            $('td[data-col='+ col +']').addClass('col-checked')
        }else{
            $('td[data-col='+ col +']').removeClass('col-checked')
        }
    }

</script>

Answer 3

Я сделаю это следующим образом:

var color = "red";
$('input[type=checkbox]').click(function(){
  var id = $(this).attr('id');
  var isChecked = $(this).prop('checked');
  var idNum = $(this).attr('id').replace('check','');
  if(idNum > 7){
    if(isChecked)
      $(this).closest('td').siblings().css('color', color);
    else
      $(this).closest('td').siblings().css('color', '');
  }
  else if(idNum < 23){
    $(this).closest('tr').siblings().each(function(i, tr){
      if(isChecked)
        $(this).find('td:eq("'+idNum+'")').css('color', color);
      else
        $(this).find('td:eq("'+idNum+'")').css('color', '');
    }); 
  }
})

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

.nochange,
tr {
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tb">
  <tbody>
    <tr>
      <td></td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check1" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check2" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check3" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check4" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check5" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check6" /> Switch</label>
      </td>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check7" /> Switch</label>
      </td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check8" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check10" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check11" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check12" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check13" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check14" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check15" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check16" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check17" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check18" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check19" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check20" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check21" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check22" /> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
          <label class="color-switch">
              <input type="checkbox" id="check23" /> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
  </tbody>
</table>

Answer 4

Вы можете сделать что-то вроде:

//Add listener on checbox inside the table with class .tb
$('.tb input[type="checkbox"]').change(function() {

  //Remove all selected
  $('.tb td').removeClass('selected');

  //Add class on rows
  //Select all checked checkbox on the first column
  //Select the parent td and select its siblings
  //Add Class
  $('.tb tr>td:first-child').find('input[type="checkbox"]:checked').each(function() {
    $(this).parent().parent().addClass('selected').siblings().addClass('selected');
  })

  //Add class on columns
  //Select all checkboxes on the first row.
  //Loop and check if checked.
  //If checked, add class on the column
  $('.tb tr:first-child').find('input[type="checkbox"]').each(function(i) {
    if ($(this).is(":checked"))
      $('.tb tr>td:nth-child(' + (i + 2) + ')').addClass('selected');
  })
})

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb">
  <tbody>
    <tr>
      <td></td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
				<input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
  </tbody>
</table>