CODEWITHSUNDEEP
javascripthtmlcss
Suman r
Suman r

Reputation: 75

seperate table header column th into two th

I want to make the below output to look like as in image with only seperating the header th into two th like the blue line i need two headers for single td please help,thanks.enter image description here 

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left; 
}
</style>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr> 
</table>

Upvotes: 1

Views: 71

Answers (3)

Ehsan
Ehsan

Reputation: 12951

This is separator with blue border-left:

th:last-child:after {
    content: 'Another';
    border-left: 1px solid blue;
    padding-left: 5px;
    margin-left: 10px;
    display: inline-block;
}


table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left; 
}
th:last-child:after {
    content: 'Another';
    border-left: 1px solid blue;
    padding-left: 5px;
    margin-left: 10px;
    display: inline-block;
}
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr> 
</table>

Upvotes: 2

Patrick Mlr
Patrick Mlr

Reputation: 2965

Just add colspan="2" to the last td and add a th. That's it.

Read more about colspan on w3schools colspan.

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left; 
}
</style>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Another</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td colspan="2">Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td colspan="2">Mexico</td>
  </tr> 
</table>

Upvotes: 1

kyun
kyun

Reputation: 10264

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left; 
}
</style>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>This??</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td colspan="2">Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td colspan="2">Mexico</td>
  </tr> 
</table>

Upvotes: 0

Related Questions