CODEWITHSUNDEEP
htmlcsshtml-table
byTreneib
byTreneib

Reputation: 176

How can I let html table borders merge into each other in css

In a current project I have a three-columned table. 

<table>
    <tr>
        <th>Datum</th>
        <th>Entschuldigt?</th>
        <th>Vermerkt von</th>
    </tr>
</table>

My current stylesheet for the table looks as following:

th {
    border-bottom: 1px solid black;
}

td + td {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

Now the table looks like this current_table

Now I would like to have those little spaces removed so the column separators and the header separator are solid and not that kind of dashed. Every help is very much appreciated

Upvotes: 1

Views: 3662

Answers (3)

vineeta kande
vineeta kande

Reputation: 44

table {
  border-collapse: collapse;
}  
th, td {
  padding: 5px;
  text-align: center;
  font-size: 20px;
  border-left: 1px solid black;
}

th:nth-child(1), td:nth-child(1) {
  border-left: none;
}

tr:nth-child(2){
   border-top: 1px solid black;
}
<table>
  <tr>
    <th>Datum</th>
    <th>Entschuldigt?</th>
    <th>Vermerkt von</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

Upvotes: 1

Zeeshan Eqbal
Zeeshan Eqbal

Reputation: 260

Another Approach:

<table cellspacing="0">

Upvotes: 1

Omri Attiya
Omri Attiya

Reputation: 4037

You need to use border-collapse: collapse on the table:

th {
  border-bottom: 1px solid black;
}

td+td {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

table {
   border-collapse: collapse;
}
<table>
  <tr>
    <th>Datum</th>
    <th>Entschuldigt?</th>
    <th>Vermerkt von</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

Upvotes: 6

Related Questions