CODEWITHSUNDEEP
htmlcsshtml-table
StormsEngineering
StormsEngineering

Reputation: 686

Put an extra cell in a table without an attached column

I am trying to add an extra table cell to a table, that isn't attached to a column. It just sticks out of the table like a 'bump' I not entirely sure what kind of styling I would need to achieve this.

What I would like it to look like this:

table

My code:

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td style="border-style:none">extra</td>
  </tr>
</table>

I would think I need to add an empty <th> and remove the border from it and then add it to the last cells in the table?

Upvotes: 1

Views: 97

Answers (2)

Marco
Marco

Reputation: 2922

With javascript, you can do it like (of course you would change nth-child(3) to your target column):

var row = document.createElement('td')
row.innerHTML = 'teste'
document.querySelector('table tr:nth-child(3)').append(row)
<table id="test">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td style="border-style:none">extra</td>
  </tr>
</table>

Upvotes: 0

jitu thakur
jitu thakur

Reputation: 740

I think you want to do like below:

    table{
      border-collapse: collapse;
      border-spacing: 0;
     }
    table tr td:last-child{
      border: none;
    }
    table td, table th{
      border: 1px #666 solid;
    }
    table tr:last-child td:last-child{
      border:  1px #666 solid;
    }
  
  <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <td></td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td></td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>extra</td>
  </tr>
</table>

Upvotes: 2

Related Questions