Removing outer border in html table

Question

I am developing a report in HTML. There I have a table. In each TD I have another table. I want to separate each table within td. So I have enabled the border of the main table. But few of the internal table need to display the cell borders. But I don't want the outer border of that particular internal table to display.

Ex.

<table ID="main" >
    <tr>
        <td>
            <table ID="INTER1">
                <tr>
                    <td>Table1 without internal border</td>
                <tr>
            </table>
        </td>
        <td>
            <table ID="INTER2">
                <tr>
                    <td>Table with internal border</td>
                <tr>
            </table>
        </td>
    </tr>
<table>

I want to do this using CSS class. I have googled for it but I found the solution which will apply for all the tags, but that means it will remove outer border of all the tables.

Can I have have the solution for above problem?

Answer 1

Here is how you can do it, you just need to add the n-bordered class to each table where you don't want the outer borders.

.border-none {
  border-collapse: collapse;
  border: none;
}

.border-none td {
  border: 1px solid black;
}

.border-none tr:first-child td {
  border-top: none;
}

.border-none tr:last-child td {
  border-bottom: none;
}

.border-none tr td:first-child {
  border-left: none;
}

.border-none tr td:last-child {
  border-right: none;
}

<table class="border-none">
   <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
   </tr>
   <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
   </tr>
   <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
   </tr>
   <tr>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
   </tr>
</table>

Answer 2

Not sure what you want, so review this and maybe we can progressively resolve this. According to Mr. Sweeney, you don't want the inner tables' borders but you still want the outer table's border. The dashed black line shows where the 2 inner table borders are. In the code are comments on how to remove them.

table#main { border: 2px dashed blue; border-collapse: collapse; }
td { border: 1px solid red; height: 80px; }
td table { border: 1px dashed black; }

/* Replace the last line with this one */
/* td table { border: none; } */

<table ID="main" >
    <tr>
        <td>
            <table ID="INTER1">
                <tr>
                    <td>Table1 without internal border</td>
                <tr>
            </table>
        </td>
        <td>
            <table ID="INTER2">
                <tr>
                    <td>Table with internal border</td>
                <tr>
            </table>
        </td>
    </tr>
<table>
  <ul>
  <li>Blue Dashed = Outer Table</li>
  <li>Black Dashed = Inner Table</li>
  <li>Red Solid = Cell</li>