HTML/CSS：刪除外部表格邊框
[英]HTML/CSS: Remove outer table borders
問題描述
我有下面的 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>
編輯：三個外框是我想要隱藏的。
2 個解決方案
解決方案1
1 2020-08-26 21:03:39
您可以使用邊框屬性刪除表格邊框
<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>
解決方案2
1 2020-08-26 21:10:27
只需在.tablestyle上注釋掉這一行/*border: 1px solid black;*/
.maintable { border: 0px; float: left; } .tablestyle { border: none; /* 1px solid black;*/ width: 420px; } .wide { width: 40%; } .thin { width: 20%; } td, th { border: 1px solid black; padding: 2px; }
<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>
使用HTML和CSS3：如何垂直擴展內部表格的邊框，使其接觸外部表格
[英]Using HTML & CSS3 : How to extend the borders of the inner table vertically, such that it touches the outer table
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.