Блог

Главная - Вопросы по программированию - Таблица не будет заполнять 100% Div. Все элементы, Tbody, Table заполняются на 100%. td и th не будут

Таблица не будет заполнять 100% Div. Все элементы, Tbody, Table заполняются на 100%. td и th не будут

#html #css

#HTML #css

Вопрос:

Я перепробовал все из других подобных вопросов, и ничего не работает, но я не могу заставить свои th и td заполнить ширину таблицы.

Таблица занимает 100% ширины содержащего div. Thead занимает 100%. Tbody занимает 100%. Tr занимают 100%.

Но 4-й и td столбцы будут занимать только около 50% ширины.

Я установил для них значение 25%, поскольку я всегда думал, что 4 x 25% добавят до 100%, но, по-видимому, не в CSS.

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

Это то, что я сделал:

 .booktable {
  width: 100%;
  overflow-y: scroll; 
  height: 55vh;
  display: inline-block;
}

.booktable thead {
    width: 100%;
    display: inline-block;
} 

.booktable tbody {
  width: 100%;
  display: block;
} 

.booktable tr{
  width: 100%;
  display: block;
}

.booktable th{
  width: 25%;
  color: grey;
  padding: 1vh;
  font-size: 2vh;
  border-bottom: 1px solid grey;
  font-weight: bold;
  position: sticky; 
  top: 0;
  background-color: white;
}


.booktable td{
  width: 25%;
  font-size: 2.5vh;
  text-align: center;
  padding: 2vh;
  color: grey;
}  
 <table class="booktable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Group</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name</td>
      <td>Cat</td>
      <td>Group</td>
      <td>Balance</td>
      </tr>
  </tbody>
</table>

Пытался отображать встроенные блоки, абсолютные значения блоков и позиций, родственников, макеты таблиц, удаление отступов … ничего не работает.
Даже удвоение ширины до 200% или 50% для td.

Не хотел спрашивать, какой должен быть действительно простой ответ, и я пробовал столько, сколько мог, но должен был спросить, поскольку я пытался часами!

Любая помощь очень ценится.

Ответ №1:

Вы перезаписываете все режимы отображения, специфичные для конкретной таблицы, так что именно из-за этого у вас возникают проблемы, попробуйте это:

 .booktable {
  width:100%;
  overflow-y: scroll; 
  height: 55vh;
  display: table;
}

.booktable thead {
    width: 100%;
    
} 

.booktable tbody {
  width: 100%;

} 

.booktable tr{
  width: 100%;
  
}

.booktable th{
  width: 25%;
  color: grey;
  padding: 1vh;
  font-size: 2vh;
  border-bottom: 1px solid grey;
  font-weight: bold;
  position: sticky; 
  top: 0;
  background-color: white;
}


.booktable td{
  width: 25%;
  font-size: 2.5vh;
  text-align: center;
  padding: 2vh;
  color: grey;
}  
   <table class="booktable">
         <thead>
            <tr>
              <th>Name</th>
              <th>Category</th>
              <th>Group</th>
              <th>Balance</th>
            </tr>
         </thead>
         <tbody>
            <tr>
              <td>Name</td>
              <td>Cat</td>
              <td>Group</td>
              <td>Balance</td>
            </tr>
         </tbody>
    </table>

Ответ №2:

Вам нужно настроить таблицу, width чтобы 100% тогда все th,td адаптировались 25% к общей ширине.

Вот рабочий пример:

 .booktable {
  width: 100%
}

.booktable th, .booktable td{
  width: 25%;
  color: grey;
  padding: 1vh;
  font-size: 2vh;
  border-bottom: 1px solid grey;
  font-weight: bold;
  position: sticky; 
  top: 0;
  background-color: white;
}


.booktable td{
  width: 25%;
  font-size: 2.5vh;
  text-align: center;
  padding: 2vh;
  color: grey;
}  
 <table class="booktable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Group</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name</td>
      <td>Cat</td>
      <td>Group</td>
      <td>Balance</td>
      </tr>
  </tbody>
</table>