时间戳

首页 > 解决方案 > HTML/CSS：删除外部表格边框

html - HTML/CSS：删除外部表格边框

问题描述

我有下面的 HTML/CSS，它应该使三个大小相等的表格彼此相邻（确实如此）。但是，我试图从嵌套结构中最外层的表中删除该框。由于内部表格的 CSS 以及我需要将三个外部表格浮动到彼此相邻的事实，我尝试过border-collapse, border=none, 甚至border-color=white. 我错过了什么？

.maintable {
  border: 0px;
  float: left;
}

.tablestyle {
  border: 1px solid black;
  width: 420px;
}

.wide {
  width: 40%;
}

.thin {
  width: 20%;
}

td,
th {
  border: 1px solid black;
  padding: 2px;
}
<html>

<head>
</head>
<br>
<br>

<body>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>
</body>

</html>

编辑：三个外框是我想要隐藏的。

在此处输入图像描述

标签： htmlcss

解决方案

您可以使用边框属性删除表格边框

<table border="0">


       
            .tablestyle {
                width: 420px;
            }
            .wide {
                width: 40%;
            }
            .thin {
                width: 20%;
            }
            td, th {
                border: 1px solid black;
                padding: 2px;
            }
<table border="0" class="tablestyle">
                    <th colspan="4"></th>
                    <col span="1" class="wide">
                    <tr><th col span="1" class="thin"></th><th col    span="1" class="thin"></th><th col span="1" class="thin"></th><th col span="1" class="thin"></th></tr>
                    <tr><td></td><td></td><td></td><td></td></tr>
</table>

推荐阅读