Тело таблицы не расширяется до полной ширины - PullRequest
Новая
       6

Тело таблицы не расширяется до полной ширины

0 голосов
/ 03 апреля 2020 

table {
  border:1px solid red;
  width:100%;
  position: relative;
}

table tbody {
  height:100px;
  overflow-y:auto;
  display:block;
}

table tbody tr {
  display:table;
  width:100%;
}

td,th {
  text-align: center;
}
<div>
  <table>
  <thead>
    <tr>
      <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>
</div>

По некоторым причинам, тело не расширяется на 100%. кто-нибудь выяснит проблему?

Ответы [ 4 ]

0 голосов
/ 03 апреля 2020

Удаление некоторых ваших CSS, особенно display: block на tbody и display:table; на tr s, уничтожает / отменяет макет таблицы c: 

table {
  border:1px solid red;
  width:100%;
  position: relative;
}

table tbody {
  height:100px;
  overflow-y:auto;
}


td,th {
  text-align: center;
}
<div>
  <table>
  <thead>
    <tr>
      <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>
</div>
0 голосов
/ 03 апреля 2020

Я вижу несколько проблем, которые вызывают это:

У вас есть css стиль на table tbody tr до: display: table; И table tbody { display: block; }

Удалите те и проблема должна быть исправлена.

Редактировать: PS, для сохранения высоты таблицы и прокрутки при необходимости я бы обернул таблицу в div и установил бы в div что-то вроде: 

div.table-wrap {
  height: 100px;
  overflow-y:auto;
}
0 голосов
/ 03 апреля 2020

Независимо от того, какой браузер выполняет рендеринг, ширина правила css: 100% устанавливает для рассматриваемого элемента ширину 100% от родительского элемента. Таким образом, таблица является 100% его родительского элемента, что бы это ни было, и для tbody вы не задали ширину, поэтому, когда вы устанавливаете ширину строк равной 100%, это 100% от ширины tbody, что Браузер установит то, что ему кажется подходящим.

Если вы хотите убедиться, что что-то такое же широкое, как область просмотра, установите ширину 100vw или убедитесь, что каждый родительский элемент имеет ширину 100%, все вплоть до тега html.

И, как указал Витикка, вы не должны устанавливать отображение: таблица на тегах tr.

0 голосов
/ 03 апреля 2020

Вы можете использовать этот пример, он будет работать, предполагая, что вы используете Bootstrap! 

<table style="width:100%;">

Внутри тега таблицы вы можете добавлять стили, не помещая их в файл CSS. Другой пример использования Bootstrap: 

<table class="bg-dark text-white" style="width:100%;">

Вы также можете использовать стилистический тег для любого тега td или tr. 

<th class="text-center text-white" style="text-transform:uppercase;">Content goes here</th>
...