JSFiddle - React, Tailwind, and code Playground

by mikhailivanko

HTML

<table class="table_scores">
        <thead>
          <tr>
            <th>Id</th>
            <th>Id пользователя</th>
            <th>Оценка кода</th>
            <th>Оценка геймплея</th>
            <th>Оценка дизайна</th>
            <th>Тур</th>
            <th>Сумма балов</th>
            <th>Редактирование</th>
            <th>Удаление</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="s in scores">
            <th>1</th>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td><button type="button">Редактировать</button></td>
            <td>
              <button type="button">
                Удалить
              </button>
            </td>
          </tr>
        </tbody>
      </table>

SCSS

.table_scores {
            color: #000;
            text-decoration: none;
            min-width: 1080px;
            table-layout: fixed;
            font-weight: 400;
            /* box-sizing: content-box; */
            background: transparent;
            text-align: center;
            td {
                padding: 0px 10px;
            }
            & > thead {
                border-top: 1px solid red;
                border-bottom: 1px solid red;
                padding: 20px;
            }
            & > thead th {
              padding: 10px;
            }
            & > tbody th {
              padding: 10px;
            }
            & > tbody > tr {
                border-bottom: 1px solid white;
            }
        }
        .table_edit-button {
            background: linear-gradient(270deg, #13e096 0%, rgba(255, 255, 255, 0) 85.78%), #19d97d;
            border-radius: 27px;
            padding: 5px 10px;
            color: white;
            font-weight: 600;
            margin: 8px 0px;
        }
        .table_delete-button {
            background: linear-gradient(270deg, #ff7b7b 0%, rgba(255, 255, 255, 0) 85.78%), #d91919;
            border-radius: 27px;
            padding: 5px 10px;
            color: white;
            font-weight: 600;
        }