How to get rid of th bottom border using css

67 views Asked by At

Is there a way to make the table column two look like column one while keeping the th tag. The line separating the two still has to be there.

The code I got so far:

.noborders th {
  border-bottom: 0;
}

table {
  border-collapse: collapse
}

#test {
  border-collapse: collapse;
  border: 0;
}
<body>
  <table cellpadding="0" cellspacing="0" width="100%" border="1">
    <th id="test"><b>One</b></th>
    <th><b>Two</b></th>
    <tr>
      <td id="test"></td>
      <td></td>
    </tr>
</body>

What I want it to look like

enter image description here

What it looks like

enter image description here

3

There are 3 answers

1
Bhuwan On BEST ANSWER

First, place your <th> inside <tr>...

Use class instead of id(id should be unique)

Just set border:0 to all td, th and apply border-right to .test

th,
td {
  border: 0;
}

td {
  padding: 20px;
}

table {
  border-collapse: collapse
}

.test {
  border-collapse: collapse;
  border-right: 1px solid;
}
<table cellpadding="0" cellspacing="0" width="100%" border="1">
  <tr>
    <th class="test"><b>One</b></th>
    <th><b>Two</b></th>
  </tr>
  <tr>
    <td class="test"></td>
    <td></td>
  </tr>
</table>

0
Hyu Kim On

there is th/td property called “rowspan” that will do what you want.

https://www.w3schools.com/tags/att_td_rowspan.asp

1
Tallboy On

You have a lot of terrible code here. For one, fix your formatting, for two, you're missing a lot of tags (closing </body>, and a <tr> wrapping your headers). Three, you don't even have the class you're referencing in your css on the table itself. Fourth, you can't have multiple ID's with the same name.

<style>
  .noborders th {
    border-bottom:0;
  }

  table { 
    border-collapse:collapse
  }

  #test {
    border: 0;
  }
</style>

HTML

<body>
  <table class="noborders" cellpadding="0" cellspacing="0" width="100%" border="1"> 
    <tr>
      <th id="test"><b>One</b></th>
      <th><b>Two</b></th>
    </tr>
    <tr>
      <td id="test2"></td>
      <td></td> 
    </tr>
  </table>
</body>