JSFiddle - React, Tailwind, and code Playground

by katalin_2003

HTML

<table class="table table-header-rotated">
    <thead>
        <tr>
            <!-- First column header is not rotated -->
            <th></th>
            <!-- Following headers are rotated -->
            <th class="rotate">
                <div><span>Vérifier</span>

                </div>
            </th>
            <th class="rotate">
                <div><span>Nettoyer</span>

                </div>
            </th>
            <th class="rotate">
                <div><span>Ajuster</span>

                </div>
            </th>
            <th class="rotate">
                <div><span>Lubrifier</span>

                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="row-header">Fonctionnement sous contrôle d'accès</th>
            <td>
                <label><input checked="checked" name="column1[]" type="checkbox" value="row1-column1">V</label>
            </td>
            <td>
                <label><input checked="checked" name="column2[]" type="checkbox" value="row1-column2">N</label>
            </td>
            <td>
                <label><input name="column3[]" type="checkbox" value="row1-column3">A</label>
            </td>
            <td>
                <label><input name="column4[]" type="checkbox" value="row1-column4">L</label>
            </td>
        </tr>
        <tr>
            <th class="row-header">Row header 2</th>
            <td>
                <input name="column1[]" type="checkbox" value="row2-column1">
            </td>
            <td>
                <input name="column2[]" type="checkbox" value="row2-column2">
            </td>
            <td>
                <input checked="checked" name="column3[]" type="checkbox" value="row2-column3">
            </td>
            <td>
                <input checked="checked" name="column4[]" type="checkbox" value="row2-column4">
            </td>
        </tr>
        <tr>
            <th class="row-header">Row header 3</th>
   ...

CSS

.table-header-rotated {
      border-collapse: collapse;
  }
  .csstransforms .table-header-rotated td {
      width: 30px;
  }
  .no-csstransforms .table-header-rotated th {
      padding: 5px 10px;
  }
  .table-header-rotated td {
      text-align: center;
      padding: 10px 5px;
      border: 1px solid #ccc;
  }
  .csstransforms .table-header-rotated th.rotate {
      height: 140px;
      white-space: nowrap;
  }
  .csstransforms .table-header-rotated th.rotate > div {
      -webkit-transform: translate(12px, 52px) rotate(-90deg);
      -ms-transform: translate(12px, 52px) rotate(-90deg);
      transform: translate(12px, 52px) rotate(-90deg);
      width: 30px;
  }
  .csstransforms .table-header-rotated th.rotate > div > span {
      /*     border-bottom: 1px solid #ccc;*/
      padding: 5px 10px;
  }
  .table-header-rotated th.row-header {
      padding: 0 10px;
      border-bottom: 1px solid #ccc;
  }

/* csa */
.ui-checkbox input, .ui-radio input {
    margin: -15px 0 0 0;
}