CODEWITHSUNDEEP
htmlcsshtml-table
CaffeineToCode
CaffeineToCode

Reputation: 830

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

Sorry if this is a plainly obvious answer, I am a horrible web designer.

I am making a help page for my program, and I'm using a table to show the hotkeys. I used CSS to center it and remove the border.

The header of the table is Action, and Trigger, but they do not show up when I open the HTML with my broswer, only the table data. To the point, why does this happen and how can it be fixed?

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>

Upvotes: 0

Views: 82

Answers (4)

Erick Cortorreal
Erick Cortorreal

Reputation: 389

You need to remove this CSS rule: td {padding: 10%;}

Upvotes: 0

Eranda
Eranda

Reputation: 868

You can resolve this thing by changing 3 style properties in .center as follow:

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

or

top: 150%;

or 

height : 100%

Upvotes: 0

D4V1D
D4V1D

Reputation: 5849

Change your .center class to this:

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

There is no need for absolute position. If you want it to be centered, juste use margin: auto;

Working Fiddle

Upvotes: 0

sinisake
sinisake

Reputation: 11318

Add: height:100%; to .center div.

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

Also, as mentioned in answer above - no need for absolute positioning....

Upvotes: 2

Related Questions