php - 如何定义表格单元格高度 (CSS/HTML)

Question

我使用标准的 CSS/HTML 来设计我的网站。使用表格进行导航，我将 "#nav table" 的宽度指定为 100%，将 "#nav th" 的宽度指定为50px 的高度。

我的问题是它实际上并没有将自己设置为我定义的内容。我原以为它就像说 height: 50px 一样简单，但即使我将它定义为 0px 它仍然是 90.5px。 在HTML 我确实定义了我的单元格和表格，等等。

我该如何解决这个问题？现在我的网站标题非常大，因为我的表格单元格不会根据我定义的内容进行调整。

仅使用 PHP、HTML 和 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

使用代码 #nav table 假设一个元素的 ID 为“nav”，里面有一个表格，而不是一个 table 元素的 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/

请注意，如果您的 th 中有一个 90.5px 高的元素，您将无法使用 CSS 降低表格标题的高度(除非您使用 CSS 降低高度该元素)。

编辑:考虑使用更现代的 nav 来代替列表项。另外，如果您愿意，您可以更轻松地让您的网站响应。 :)

<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/