HTML/CSS：删除外部表格边框
[英]HTML/CSS: Remove outer table borders
问题描述
I have the below HTML/CSS which is supposed to float three tables of equal size next to each other (it does).
我有下面的 HTML/CSS，它应该将三个相同大小的表格彼此相邻浮动（确实如此）。 However, I am trying to remove the box from the outer-most tables in the nested structure.但是，我试图从嵌套结构中最外层的表中删除该框。 Due to the CSS for the inner tables and the fact that I need to float the three outer tables next to each other, I've tried border-collapse , border=none , even border-color=white .由于内部表格的 CSS 以及我需要将三个外部表格彼此相邻浮动的事实，我尝试了border-collapse 、 border=none ，甚至border-color=white 。 What am I missing?我错过了什么？
.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>
EDIT: The three outer boxes are what I am trying to hide.编辑：三个外框是我想要隐藏的。
2 个解决方案
解决方案1
1 2020-08-26 21:03:39
You can remove table border by using border attribute您可以使用边框属性删除表格边框
<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
Just comment out this one line /*border: 1px solid black;*/ on the .tablestyle只需在.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
表格边框html css - Table borders html css
使用HTML和CSS3：如何垂直扩展内部表格的边框，使其接触外部表格 - Using HTML & CSS3 : How to extend the borders of the inner table vertically, such that it touches the outer table
CSS / HTML表中的边框 - Borders in my CSS/HTML table
带边框和边框的HTML CSS表 - HTML CSS table with padding and borders
HTML 表格无法去除边框 - HTML table can't remove borders
如何从 HTML 表中完全删除边框 - How to completely remove borders from HTML table
HTML：是否总是有可能删除表格单元格边框？ - HTML: Is it always possible to remove table cell borders?
如何完全删除HTML表边框？ - How to remove HTML table borders completely?
在表格的特定行上隐藏边框，HTML CSS - Hiding borders on specific lines of table, HTML CSS
HTML + CSS表，麻烦设置边框 - HTML+CSS Table, trouble setting borders
相关标签