CSS Table 不会改变高度

Question

我有这个正文和 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 的高度，但不能更改 table 或 tbody。你有什么解决办法吗？

Answer 1

桌子很特别。在 table 上设置高度在规范中未定义。只需在 TH 上设置高度即可。

https://www.w3.org/TR/CSS2/tables.html#height-layout

17.5.3 Table height algorithms

The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders. Any other value is treated as a minimum height. CSS 2.1 does not define how extra space is distributed when the 'height' property causes the table to be taller than it otherwise would be.

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>

Answer 2

我知道你需要让 tbody 有一个特定的高度，因为数据是动态的。所以我给你的建议是：

最初显示 "data not available" tr 如下所示。
当数据准备好显示给用户时，将其标记为 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>

CSS Table 不会改变高度

CSS Table won't change height

html

css

alignment

height

css-tables

17.5.3 Table height algorithms