HTML/CSS: Remove outer table borders

Question

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.

The code you have is not floating the tables, so its difficult to see what the problem is. Also, please show us where you used border-collapse, border=none and border-color=white so we can see what you were trying to do. — FluffyKitten
– FluffyKitten, Commented Aug 26, 2020 at 20:47
This HTML with a table in a table like this isn't really valid, but is removing the border from the .tablestyle class what you're wanting? — abney317
– abney317, Commented Aug 26, 2020 at 20:48
The table element may only contain caption, colgroup, thead, tbody, tfoot, or tr elements. The name of the attribute is colspan, not col and span. Of course, you don't need a colspan attribute if the cell spans a single column. In any case, your HTML is invalid. — Heretic Monkey
– Heretic Monkey, Commented Aug 26, 2020 at 21:16
@abney317 Actually I am trying to remove it from .maintable — sbagnato
– sbagnato, Commented Aug 27, 2020 at 20:15
I just edited the post. I am trying to remove those three outer boxes. All of the nested tables are fine. — sbagnato
– sbagnato, Commented Aug 27, 2020 at 20:18

ZH Rifat · Accepted Answer · 2020-08-26 21:03:39Z

2

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>

answered Aug 26, 2020 at 21:03

ZH Rifat

696 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Linux Torvalds · Accepted Answer · 2020-08-26 21:10:27Z

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>

Hi @Gad I tried that, however, it would need to be removed for .maintable not .tablestyle. And, removing it from maintable does nothing, for some reason. It still shows.
@sbagnato the easiest way is to set both table.maintanable and table.tablestyle's border to none because both of the them are tables which have contents inside so if you don't set any of them's borders to none will show borders around its children
Hm, .tablestyle's border is now hidden, but .maintable is still there, even with both set to none. I don't get what I am missing...

Collectives™ on Stack Overflow

HTML/CSS: Remove outer table borders

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related