kl1mmm
@kl1mmm
Хто я?

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

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

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>


637bbec6af852953965321.png
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
kl1mmm
@kl1mmm Автор вопроса
Хто я?
По итогу проблема была в самом дочернем элементе MySpreadsheet: проверил стили в нём и назначив width: 90% проблема ушла.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@AntowaKartowa
Зачем постить код импорты компонент которых у меня нет если вопрос по верстке. Нужно было добавить сгенерированный 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;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы