sbagnato
Reputation: 496
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). 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. 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.
Upvotes: 2
Views: 1511
Answers (2)
Umutambyi Gad
Reputation: 4101
Just comment out this one line /*border: 1px solid black;*/ on the .tablestyle
.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>Upvotes: 1
ZH Rifat
Reputation: 69
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>Upvotes: 2
Related Questions
- How to remove the outer border of a table within another table (HTML)
- Removing outer border in html table
- Removing unwanted table cell borders with CSS
- How to remove HTML table borders completely?
- Remove table border
- Removing invisible borders from table with CSS
- Removing table cell borders CSS
- How to remove all borders in table?
- how to get rid outer table border
- html to remove border from inner table