Таблица CSS не изменит высоту

У меня есть это тело и CSS для раздела #content:

section#content {
 background-color: #ffffff;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
 color: #444;
 display: table-cell;
 padding: 7px 18px 21px;
 vertical-align: top;
 width: 617px;
 display: table-cell;
 vertical-align: top;
}
section#content .table {
 border-radius: 5px;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 background-clip: padding-box;
 border: 1px solid #d5d5d5;
 display: table;
}

section#content table.table {
 border-spacing: 0;
 width: 100%;
}

section#content table.table td {
 background-color: #f4f4f4;
 padding: 7px;
 text-align: left;
 vertical-align: middle;
 word-break: break-word;
 transition-property: background;
 transition-duration: 0.1s;
 transition-timing-function: linear;
}

section#content table.table tr:nth-child(even)>td {
 background-color: #ebebeb;
}

section#content table.table th {
 background-color: #ebebeb;
 border-bottom: 1px solid #d0d0d0;
 border-right: 1px solid #d0d0d0;
 background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 color: #444444;
 font-weight: normal;
 box-shadow: 0 0 0 1px #FFFFFF inset;
}

section#content .playerTableBackground {
 background-attachment: scroll, scroll, fixed;
    background-image: url("pageBG.jpg");
    background-position: center top, center bottom, center top;
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size: auto auto, auto auto, cover;
}
<body style="background: none">
 <section id="content">
  <noscript>
   <div class="messagebox error">
    In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das
    Ticketsystem nutzen zu können, muss JavaScript aktiviert sein.
    Andernfalls ist beispielsweise das Antworten auf Tickets nicht
    möglich.
   </div>
  </noscript>

  <div class="playerTableBackground">
   <table id="playerTable" class="table" style="opacity: 0.9;">
    <thead>
     <tr>
      <th>Name</th>
      <th>Sozialer Status</th>
      <th>Spielzeit</th>
      <th>Telefon</th>
      <th>Fraktion</th>
      <th>Freundschaft</th>
      <th>Ping</th>
     </tr>
    </thead>
    <tbody class="playerTableBody">
   </table>
  </div>
 </section>

</body>

Я могу изменить только высоту div, но не таблицу или tbody. Есть ли у вас какие-либо решения?

Источник

2 ответа

Решение

Я понимаю, что вам нужно иметь конкретную высоту, поскольку данные поступают динамически. Поэтому я предлагаю вам следующее:

  1. Изначально показывать "данные недоступны" tr согласно ниже.

  2. Когда данные готовы для показа пользователю, отметьте их как display: none и показать данные внутри tbody,

Надеюсь это поможет. Дайте мне знать ваши отзывы. Спасибо!

section#content {
 background-color: #ffffff;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
 color: #444;
 display: table-cell;
 padding: 7px 18px 21px;
 vertical-align: top;
 width: 617px;
 display: table-cell;
 vertical-align: top;
}
section#content .table {
 border-radius: 5px;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 background-clip: padding-box;
 border: 1px solid #d5d5d5;
 display: table;
}

section#content table.table {
 border-spacing: 0;
 width: 100%;
}

section#content table.table td {
 background-color: #f4f4f4;
 padding: 7px;
 text-align: left;
 vertical-align: middle;
 word-break: break-word;
 transition-property: background;
 transition-duration: 0.1s;
 transition-timing-function: linear;
}

section#content table.table tr:nth-child(even)>td {
 background-color: #ebebeb;
}

section#content table.table th {
 background-color: #ebebeb;
 border-bottom: 1px solid #d0d0d0;
 border-right: 1px solid #d0d0d0;
 background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 color: #444444;
 font-weight: normal;
 box-shadow: 0 0 0 1px #FFFFFF inset;
}

section#content .playerTableBackground {
 background-attachment: scroll, scroll, fixed;
    background-image: url("pageBG.jpg");
    background-position: center top, center bottom, center top;
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size: auto auto, auto auto, cover;
}

section#content table.table td.empty{
    height: 200px;
    text-align:center;
 }
<body style="background: none">
 <section id="content">
  <noscript>
   <div class="messagebox error">
    In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das
    Ticketsystem nutzen zu können, muss JavaScript aktiviert sein.
    Andernfalls ist beispielsweise das Antworten auf Tickets nicht
    möglich.
   </div>
  </noscript>

  <div class="playerTableBackground">
   <table id="playerTable" class="table" style="opacity: 0.9;">
    <thead>
     <tr>
      <th>Name</th>
      <th>Sozialer Status</th>
      <th>Spielzeit</th>
      <th>Telefon</th>
      <th>Fraktion</th>
      <th>Freundschaft</th>
      <th>Ping</th>
     </tr>
    </thead>
    <tbody class="playerTableBody">
                  <tr>
                    <td class="empty" colspan="7">No data available!</td>
                    </tr>
                </tbody>
   </table>
  </div>
 </section>

</body>

Источник

Столы специальные. Установка высоты на столе не определена в спецификации. Просто установите высоту на вашем TH вместо.

https://www.w3.org/TR/CSS2/tables.html

17.5.3 Алгоритмы высоты стола

Высота таблицы задается свойством 'height' для элемента 'table' или 'inline-table'. Значение 'auto' означает, что высота является суммой высот строк плюс любой интервал или границы ячеек. Любое другое значение рассматривается как минимальная высота. CSS 2.1 не определяет, как распределяется дополнительное пространство, когда свойство 'height' заставляет таблицу быть выше, чем было бы в противном случае.

section#content {
 background-color: #ffffff;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
 color: #444;
 display: table-cell;
 padding: 7px 18px 21px;
 vertical-align: top;
 width: 617px;
 display: table-cell;
 vertical-align: top;
}
section#content .table {
 border-radius: 5px;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 background-clip: padding-box;
 border: 1px solid #d5d5d5;
 display: table;
}

section#content table.table {
 border-spacing: 0;
 width: 100%;
}

section#content table.table td {
 background-color: #f4f4f4;
 padding: 7px;
 text-align: left;
 vertical-align: middle;
 word-break: break-word;
 transition-property: background;
 transition-duration: 0.1s;
 transition-timing-function: linear;
}

section#content table.table tr:nth-child(even)>td {
 background-color: #ebebeb;
}

section#content table.table th {
 height: 45px;
 background-color: #ebebeb;
 border-bottom: 1px solid #d0d0d0;
 border-right: 1px solid #d0d0d0;
 background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 color: #444444;
 font-weight: normal;
 box-shadow: 0 0 0 1px #FFFFFF inset;
}

section#content .playerTableBackground {
 background-attachment: scroll, scroll, fixed;
    background-image: url("pageBG.jpg");
    background-position: center top, center bottom, center top;
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size: auto auto, auto auto, cover;
}
<body style="background: none">
 <section id="content">
  <noscript>
   <div class="messagebox error">
    In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das
    Ticketsystem nutzen zu können, muss JavaScript aktiviert sein.
    Andernfalls ist beispielsweise das Antworten auf Tickets nicht
    möglich.
   </div>
  </noscript>

  <div class="playerTableBackground">
   <table id="playerTable" class="table" style="opacity: 0.9;">
    <thead>
     <tr>
      <th>Name</th>
      <th>Sozialer Status</th>
      <th>Spielzeit</th>
      <th>Telefon</th>
      <th>Fraktion</th>
      <th>Freundschaft</th>
      <th>Ping</th>
     </tr>
    </thead>
    <tbody class="playerTableBody">
   </table>
  </div>
 </section>

</body>

Источник
Другие вопросы по тегам