Question

我正在玩HTML表格，th colspan=3 border: 0px solid black不应该有边框顶部和底部，但确实如此。是什么原因？

我已将所有边框与border-collapse: collapse一起删除。

我也创建了这个fiddle。

截图：

PS：我知道表格不应该用于布局我只是想了解表格的工作方式。

更新我知道当我不使用border-collapse时，这些额外的边框不会显示，但需要在表格的其余部分使用<!doctype html> <html> <head> <style> html,body {height: 100%; margin:0; padding: 0px; } table {width: 100%; height: 100%; } table, td, th, .box{ border:0px solid black; border-collapse: collapse; padding: 0; } .main {width: 980px; margin: 0px auto; border-width: 1px;} /* header */ .main .header { height: 150px; border-bottom-width: 1px;} .main .header td{ width: 150px; vertical-align: top;} .main .header td img {float: right;} .main .header td img[src*='flag'] {margin: 5px 3px 0px 4px;} /* header */ /* Nav */ .main .nav { height: 32px; border-bottom-width: 1px;} .main .nav th { width: 25%; border-right-width: 1px; } .main .nav th:nth-last-child(1) { border-right-width: 0px; } .main .nav th:first-letter{ text-transform: uppercase; color: red;} .main .nav th:hover { background-color: black; color:white;} /* Content */ .main .Content { padding: 70px 130px 20px; } .main .Content td { width: 300px; height: 300px; border-width: 1px; } </style> </head> <body> <table class="main"> <tr> <td class="header"> <table> <tr> <td><img src="image/logo.jpg"></td> <th>Site Name</th> <td><img src="image/flag-nl.png" /><img src="image/flag-us.png" /></td> </tr> </table> </td> </tr> <tr> <td class="nav"> <table> <th>Product</th> <th>Support</th> <th>services</th> <th>about us</th> </table> </td> </tr> <tr> <td class="Content"> <table> <tr> <td>1</td> <th>2</th> <td>3</td> </tr> <tr><th colspan="3"> </th></tr> <tr> <td>1</td> <th>2</th> <td>3</td> </tr> </table> </td> </tr> </table> </body> </html> </pre>。

.colors {
  background: black;
  width: 80%;
  height: 20%;
  position: absolute;
  top: 60%;
  overflow: auto;
  white-space: nowrap;
}

.select {
  
  margin: 10px;
  color: transparent;
  z-index: 22;
  background: red;
  width: 20%;
  height: 80%;
  display:inline-block;
}

Answer 1

尝试删除此内容：border-collapse: collapse;

Answer 2

<html>
  <head>
    <style>
      html, body {
        height: 100%;
        margin:0;
        padding: 0px;
      }
      table {
        width: 100%;
        height: 100%;
      }
      table, td, .box { 
        border:0px solid black;
        border-collapse: collapse;
        padding: 0;
      }
      .main { 
        width: 980px;
        margin: 0px auto;
        border-width: 1px;
        border: none;
      }
      /* header */
      .main .header { 
        height: 150px;
        border-bottom-width: 1px;
      }
      .main .header td { 
        width: 150px;
        vertical-align: top;
      }
      .main .header td img {
        float: right;
      }
      .main .header td img[src*='flag'] {
        margin: 5px 3px 0px 4px;
      }

      /* header */
      /* Nav */
      .main .nav {
        height: 32px;
        border-bottom-width: 1px;}
      .main .nav th {
        width: 25%;
        border-right-width: 1px;
      }
      .main .nav th:nth-last-child(1) {
        border-right-width: 0px;
      }
      .main .nav th:first-letter{ text-transform: uppercase;
        color: red;
      }
      .main .nav th:hover { background-color: black;
        color:white;
      }

      /* Content */
        .main .Content {
        padding: 70px 130px 20px;
      }
      .main .Content td {
        width: 300px;
        height: 300px;
        border-width: 1px;
      }
      .nav .Content tr {
        border: 1px solid black;
      }
  </style>
</head>

网站名称产品支持服务关于我们 1 2 3 1 2 3

额外的边界

2 个答案: