Question

对不起，如果这是一个明显的答案，我是一个可怕的网页设计师。

我正在为我的程序制作帮助页面，我正在使用表格来显示热键。我使用CSS来居中并删除边框。

表的标题是Action和Trigger，但是当我用broswer打开HTML时，它们不显示，只有表数据。至于这一点，为什么会发生这种情况以及如何解决？

小提琴：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课程更改为：

.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表格标题没有显示，如何修复？

4 个答案: