How to get rid of th bottom border using css

Question

How to get rid of th bottom border using css

65 views Asked by Encore Kulik At 07 December 2024 at 11:33

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

What it looks like

Original Q&A

There are 3 answers

Hyu Kim On 11 February 2018 at 04:58

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

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

Tallboy On 11 February 2018 at 05:00

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>

**Bhuwan** · Accepted Answer · 2018-02-11 05:08:59

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>

TechQA.

How to get rid of th bottom border using css

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Popular Questions

Popular Tags

Trending Questions