如何定义表格单元格的高度（CSS / HTML）

Question

I'm using standard CSS/HTML for designing my website. Using a table for the navigation, I assign my "#nav table" with a width of 100% and my "#nav th" with a height of 50px .

My issue is that it's not actually setting itself to what I define. I had assumed it was as easy as just saying height: 50px but even when I define it as 0px it remains at 90.5px. In the HTML I did define my cells and what the table was, etc.

How can I fix this? Right now my site header is outrageously large because my table cells won't adjust to what I define them.

Using just PHP, HTML, and CSS.

CSS:

    #nav table {
        margin: 15px;
        width: 100%;
        position: fixed;
        }

    #nav th {
        height: 0px;
        border: 5px black solid;
        padding: 25px;
        text-align: center;
        white-space: nowrap;
        letter-spacing: 0px;
        word-spacing: 5px;
        }

HTML:

    <center>
    <table id="nav">
    <tr>
    <th><a href="LINK"><h1>LINK</h1></a></th>
    <th><a href="LINK1"><h1>LINK1</h1></a></th>
    <th><a href="LINK2"><h1>LINK2</h1></a></th>
    <th><a href="LINK3"><h1>LINK3</h1></a></th>
    <th><a href="LINK4"><h1>LINK4</h1></a></th>
    <th><a href="LINK5><h1>LINK5</h1></a></th>
    </tr>
    </table>
    </center>
    <p>
    Page Directory:

Answer 1

Using the code #nav table assumes an element with the ID "nav" with a table inside, and not a table element with the id "nav".

<style type="text/css">
  /* For a table with the id of 'nav'.  You could equally remove 'table'. */
  table#nav {
    margin: 15px;
    width: 100%;
    position: fixed;
  }
  #nav th {
    height: 0px;
    border: 5px black solid;
    padding:0 25px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0px;
    word-spacing: 5px;
  }
  th h1 {
    margin:0;
  }
</style>

<center>
  <table id="nav">
    <tr>
      <th><a href="LINK"><h1>LINK</h1></a></th>
      <th><a href="LINK1"><h1>LINK1</h1></a></th>
      <th><a href="LINK2"><h1>LINK2</h1></a></th>
      <th><a href="LINK3"><h1>LINK3</h1></a></th>
      <th><a href="LINK4"><h1>LINK4</h1></a></th>
      <!-- Don't forget to close all hrefs with a double-quote: -->
      <th><a href="LINK5"><h1>LINK5</h1></a></th>
    </tr>
  </table>
</center>

https://jsfiddle.net/cz1o8a2n/1/

Note that if you have an element inside of your th that is 90.5px tall, you will not be able to make the table header less tall using CSS (unless you use CSS to decrease the height of that element).

Edit : Consider using the more moder nav instead, with list-items. Plus, you'll have an easier time making your site responsive if you like. :)

<style type="text/css">
  nav {
    margin: 15px;
    width: calc(100% - 30px);
    position: fixed;
    text-align:center;
  }
  nav ul {
    padding-left:0;
    list-style:none;
  }
  nav li {
    display:inline-block;
    border: 3px black solid;
    padding:0 20px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0px;
    word-spacing: 5px;
    margin:2px 0;
  }
</style>
<nav id="nav">
  <ul>
    <li><a href="LINK">LINK</a></li>
    <li><a href="LINK1">LINK1</a></li>
    <li><a href="LINK2">LINK2</a></li>
    <li><a href="LINK3">LINK3</a></li>
    <li><a href="LINK4">LINK4</a></li>
    <li><a href="LINK5">LINK5</a></li>
  </ul>
</nav>

https://jsfiddle.net/cz1o8a2n/2/

Answer 2

HTML
You're missing a " for LINK5.

<center>
    <table id="nav">
        <tr>
            <th><a href="LINK"><h1>LINK</h1></a></th>
            <th><a href="LINK1"><h1>LINK1</h1></a></th>
            <th><a href="LINK2"><h1>LINK2</h1></a></th>
            <th><a href="LINK3"><h1>LINK3</h1></a></th>
            <th><a href="LINK4"><h1>LINK4</h1></a></th>
            <th><a href="LINK5"><h1>LINK5</h1></a></th>
        </tr>
    </table>
</center>

CSS
If you want to apply css to a table with the id set to nav your selector needs to be table#nav . As for the table headings being larger than you like, the issue is the h1 tag inherently has a pretty big margin. This big margin is making your table headings larger than you'd like.

table#nav {
    margin: 15px;
    width: 100%;
    position: fixed;
}

#nav th {
    height: 50px;
    border: 5px black solid;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

#nav th h1 {
    margin: 0;
}