[Vuejs]-How to get <th> elements to align with <tr> and <td> elements

by

0👍

Edit Try this code seperated:

<template>
  <div class="card">
    <table class="table table-hover custom-table table-responsive">
      <thead>
        <draggable v-model="tableHeaders" :options="{ handle: '.handle' }">
          <th class="handle" v-for="header in tableHeaders" :key="header">
            {{ header }}
          </th>
        </draggable>
      </thead>
      <tbody>
        <draggable
          v-model="tableData"
          :options="{
            handle: '.handle',
            ghostClass: 'ghost-class',
            chosenClass: 'chosen-class',
          }"
        >
          <tr v-for="item in tableData" :key="item.id" class="handle">
            <td v-for="header in tableHeaders">
              {{ item[header.toLowerCase()] }}
            </td>
          </tr>
        </draggable>
      </tbody>
    </table>
  </div>
</template>

<style>
  th:hover,
  td:hover {
    cursor: pointer;
  }

  .ghost-class {
    opacity: 0.5;
    z-index: 9999;
    transition: all 0.3s ease-in-out;
  }

  .chosen-class {
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
  }

  .custom-table td,
  .custom-table th {
    transition: all 0.3s ease-in-out;
    text-align: center;
    vertical-align: middle;
    width: 90vw;
    font-size: 13px;
    border: 1px solid red;
  }

  .custom-table th {
    color: #6a6c8f;
    border-top: none;
    border-bottom: none;
  }

  .custom-table .handle {
    cursor: move;
  }

  .custom-table .handle:active {
    cursor: grabbing;
  }

  .custom-table .handle:hover {
    background-color: #323346;
    color: #ffffff;
  }

  .custom-table .handle:hover td,
  .custom-table .handle:hover th {
    opacity: 0.6;
  }

  .custom-table .handle:hover .chosen-class,
  .custom-table .handle:hover .ghost-class {
    opacity: 0.6;
  }

  .custom-table .handle:hover .chosen-class {
    cursor: grabbing;
  }

  .custom-table .handle:hover .ghost-class {
    cursor: move;
  }
</style>

Leave a comment