CSS - Центрировать переполнение содержимого ячейки таблицы на родительской - PullRequest
Новая
       38

CSS - Центрировать переполнение содержимого ячейки таблицы на родительской

0 голосов
/ 09 июля 2020

Я создаю сайт, используя Bootstrap, и у меня есть большая таблица с множеством столбцов, что приводит к горизонтальному переполнению. Я только что добавил строки, которые растягиваются на всю ширину таблицы, чтобы сгруппировать данные по месяцам, с выровненным по центру тегом <p>, указывающим месяц. Однако, поскольку на большинстве экранов таблица до сих пор переполняется, выравнивание по центру смещает текст далеко вправо, а иногда и за пределы экрана. Стол

(вы можете увидеть мою залитую серым полноразмерную строку со смещенным вправо текстом).

Я уже довольно много поискал и нашел некоторые решения для выравнивания по центру a <div> с его родительским контейнером, используя flex, но мне не удалось заставить это работать в таблице.

Кто-нибудь знает способ выравнивания моего текста по центру с родительским контейнером (скажем, , карта Bootstrap, на которой находится стол). Я бы хотел, чтобы он отображался в центре видимого экрана, чтобы он выглядел более естественным для пользователя.

Любая помощь будет очень принята.

Изменить Я должен был уточнить, размещая текст посередине видимого экрана, я надеялся, что когда пользователь будет прокручивать по горизонтали, текст останется в середине экрана. Я мог бы просить здесь слишком многого, просто подумал, что некоторые из вас CSS одаренных людей могут указать мне правильное направление.

1 Ответ

0 голосов
/ 09 июля 2020 

table {
  border-collapse: collapse;
}

table tbody tr td  {
  border: 1px solid black;
}

.me-alone {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  left: 50vw;
}
<table>
  <tbody>
    <tr>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
    </tr>
    <tr>
      <td colspan="10" style="background-color: lightgray;">
        <span class="me-alone">Some Text</span>
       </td>
    </tr>
    <tr>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
    </tr>
  </tbody>
</table>
...