HTML Table Header 没有显示，如何修复？

Question

抱歉，如果这是一个显而易见的答案，我是一个糟糕的网页设计师。

我正在为我的程序制作一个帮助页面，我正在使用 table 来显示热键。我使用 CSS 将其居中并移除边框。

table的header是Action，还有Trigger，但是我用浏览器打开HTML不显示，只有table数据。至此，为什么会发生这种情况，如何解决？

A fiddle: http://jsfiddle.net/CaffeineToCode/rq9hc7hL/1/

<!DOCTYPE html>
<html>

<head>
    <title>Help</title>
</head>

<style>

body {
    background: -webkit-linear-gradient(left, #F99200, #FDE000);
    background: -o-linear-gradient(left, #F99200, #FDE000);
    background: -moz-linear-gradient(left, #F99200, #FDE000);
    background: linear-gradient(to right, #F99200, #FDE000);
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

table, td, th {
    border: none;
}

td {
    padding: 10%;
}

</style>

<body>

<div class="center">
<table>

  <tr>
    <th>Action</th> <!-- No header??? -->
    <th>Trigger</th>
  </tr>

  <tr>
    <td>Fullscreen</td>
    <td>"f11" key</td>
  </tr>

  <tr>
    <td>Turn page forward</td>
    <td>"&rarr;" key or right page curl</td>
  </tr>

  <tr>
    <td>Turn page backward</td>
    <td>"&larr;" key or left page curl</td>
  </tr>

  <tr>
    <td>Set bookmark</td>
    <td>Bookmark icon, <i>CTRL + B</i>, or Menu > Set bookmark</td>
</tr>

  <tr>
    <td>Go to bookmark</td>
    <td>Menu > Go to bookmark</td>
</tr>

<tr>
    <td>Go to page</td>
    <td>Menu > Go to page</td>
</tr>

<tr>
    <td>Go to page</td>
    <td>Menu > Go to page</td>
</tr>

<tr>
    <td>Go to book</td>
    <td>Menu > Go to book</td>
</tr>

<tr>
    <td>Go to verse</td>
    <td>Menu > Go to book, then type "&lt;book&gt; &lt;verse&gt;"</td>
</tr>

</table>
</div>

</body>
</html>

Answer 1

添加：height:100%; 到 .center div。

http://jsfiddle.net/rq9hc7hL/5/

此外，如上面的回答所述 - 不需要绝对定位....

Answer 2

将您的 .center class 更改为：

.center {
    margin: auto;
    width: 50%;
}

不需要absolute位置。如果你想让它居中，只需使用 margin: auto;

Working Fiddle

Answer 3

您需要删除此 CSS 规则：td {padding: 10%;}

Answer 4

您可以通过更改 .center 中的 3 个样式属性来解决此问题，如下所示：

transform: translate(-50 %, -15%);

或

top: 150%;

或

height : 100%

HTML Table Header 没有显示，如何修复？

HTML Table Header isn't showing, how can it be fixed?

html

css

html-table