在没有附加列的表格中放置一个额外的单元格

Question

我正在尝试向未添加到列的表添加额外的表单元格。它只是像一个“凸点”一样伸出桌子，我不确定要实现此目的需要哪种样式。

我希望它看起来像这样：

我的代码：

<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>

我认为我需要添加一个空的<th>并从中删除边框，然后将其添加到表格的最后一个单元格中？

Answer 1

我想你想做以下事情：

    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>

Answer 2

使用javascript，您可以像一样进行操作（当然，您可以将###123##12##更改为目标列）：

nth-child(3)

var row = document.createElement('td')
row.innerHTML = 'teste'
document.querySelector('table tr:nth-child(3)').append(row)