Как разместить все строчные элементы таблицы равномерно по ширине блока?

Question

[Илья Климов]

Всем привет. Подскажите пожалуйста, как растянуть все элементы строки таблицы по ширине экрана? Буду крайне благодарен за помощь!
Для удобства в разборе данного вопроса прикрепляю скриншот того, какой результат в данном случае нужен, а также имеющегося у меня кода:

P.S.: Скриншот располагается после кода.

<template>
  <div class="wrapper">
    <MyNavbar style="width: 100%;"></MyNavbar>
    <div class="screen">
      <div class="block">
        <div class="table-naming">
          Активные игроки
        </div>
        <div class="table">
          <MySpreadsheet>
            <tbody class="sessionsList" v-for="player in playersData" :key="player.ID">
            <tr>
              <td>{{ player.PlayerName }}</td>
              <td><MyStatus class="S Free" style="padding: 0.25em 0.75em">{{ player.Status }}</MyStatus></td>
              <td><MyButton class="MSmall">Позвать играть</MyButton></td>
            </tr>
            </tbody>
          </MySpreadsheet>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavbar from "@/components/UI/MyNavbar";
import MySpreadsheet from "@/components/UI/MySpreadsheet";
import MyButton from "@/components/UI/MyButton";
import MyStatus from "@/components/UI/MyStatus";

export default {
  name: "SessionsPage",
  components: {MyStatus, MyButton, MySpreadsheet, MyNavbar},
  data() {
    return {
      playersData: [{ID: '1', PlayerName: 'Александров Игнат Анатолиевич', Status: 'Свободен'}]
    }
  }
}
</script>

<style scoped>
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  background: #ffffff;
  width: 48.5%;
  height: 90%;
  box-shadow: 0 4px 20px rgba(44, 57, 121, 0.09);
  border-radius: 40px;
}

.table-naming {
  font-weight: 700;
  font-size: 1.5em;
  line-height: 150%;
  margin: 4% 0 0 5%;
  text-align: left;
}

MySpreadsheet {
  width: 90%;
  height: 90%;
}

</style>

Answer 1

[Илья Климов]

По итогу проблема была в самом дочернем элементе MySpreadsheet: проверил стили в нём и назначив width: 90% проблема ушла.

Answer 2

[Antowa Kartowa]

Зачем постить код импорты компонент которых у меня нет если вопрос по верстке. Нужно было добавить сгенерированный html и css который быстро можно было вы вставить в онлайн редактор. Там мне нужно вместо MySpreadsheet вставлять table в разметке и в стилях и руками вводить значения ячеек.

Если я правильно понял вопрос, то для начала нужно выровнять таблицу добавив table margin: 0 auto;
В третьей колонке выровнять контент по правому краю, во второй колонке по центру.

table {
  width: 90%;
  margin: 0 auto;
}

td:nth-child(2) {
  text-align: center;
}

td:nth-child(3) {
  text-align: right;
}

Comments

[Илья Климов]

Все недовольства принял во внимание :) С элементами верно разобрались, но проверив Ваш совет, к сожалению, элементы не изменили своего размещения :/

[Antowa Kartowa]

Немного скорректирую рекомендацию. Лучше сразу подготовить рабочий пример в простой песочнице типа codepen, jsfiddle или в более комплексный пример с множеством файлов, фреймворком и тд в stackblitz или чем то подобном.

Вот пример в песочнице с той разметкой и стилями, что вы дали https://jsfiddle.net/AntowaKartowa/Lp7vto5u/
Если не работает, то вероятно, что-то осталось не учтено, какие-то глобальные стили, стили компонентов кнопки или статус маркера.

[Илья Климов]

Antowa Kartowa, порывшись обнаружил, что моя ошибка оказалась чуть более глубоко, чем я её искал. Всего лишь в элементе таблицы нужно было также задать ширину 90%). Большое спасибо за помощь!