having trouble collapsing borders on a specific table only-CodePudding

table.perimeter td,
table.perimeter th 
{
border: 1px solid blue;
border-collapse: collapse;
}

I've tried a few things nothing works. the borders around each cell stay separated. help!

CodePudding user response：

table,th,td 
{
  border: 1px solid blue;
  border-collapse: collapse;
}

or

add a class to table "table1"

.table1{
   border: 1px solid blue;
   border-collapse: collapse;
}

CodePudding user response：

You have to apply border-collapse to the table (MDN).

table.perimeter {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
}

<table >
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
      <td>with two columns</td>
    </tr>
  </tbody>
</table>

Since we don't have your structure, I can't tell if table.perimeter is a sufficient selector to apply it to a specific table, you may have to add an id