如何使用 html 和 css 删除单元格的边框？ [复制]答案

【问题标题】：How to remove border of a cell with html and css? [duplicate]如何使用 html 和 css 删除单元格的边框？ [复制]
【发布时间】：2022-06-14 14:22:20
【问题描述】：

table{
    border-collapse: collapse;
}
th,td{
    padding: 5px;
}
.border-none{
    border:none;
}

<table border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Qte</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Pc</td>
      <td>1440</td>
      <td>2</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Phone</td>
      <td>1300</td>
      <td>3</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="border-none"></th>
      <th>Total</th>
      <th>100</th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

我的桌子是这样的：

但是我怎样才能删除最后一行的第一个单元格：

我也试过了：

style='border:none;'

和

style='border-left:none;border-bottom:none;border-top:none'

但没有任何改变，非常感谢任何帮助！

【问题讨论】：

你可以直接设置你的td和th：th, td{ border: 1px solid grey; } tfoot th:first-child { border:0; }

标签： html css border

【解决方案1】：

您可以在表格页脚中定位“最后一个类型”tr 和“第一个类型”td。

您可以看到我还必须从 table 元素中删除边框，因为它包围了整个表格

table{
    border-collapse: collapse;
    border: none;
}
th,td{
    padding: 5px;
}
.border-none{
    border:none;
}

tfoot tr:last-of-type td:first-of-type {
  border: none;
}

<table border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Qte</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Pc</td>
      <td>1440</td>
      <td>2</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Phone</td>
      <td>1300</td>
      <td>3</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="border-none"></th>
      <th>Total</th>
      <th>100</th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

【讨论】：

【解决方案2】：

您可以将 css 调整为：

.border-none{
    border-color: transparent;
    border-right: 1px solid black;
}

table{
    border-collapse: collapse;
}
th,td{
    padding: 5px;
}
.border-none{
    border-color: transparent;
    border-right: 1px solid black;
}

<table border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Qte</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Pc</td>
      <td>1440</td>
      <td>2</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Phone</td>
      <td>1300</td>
      <td>3</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="border-none"></th>
      <th>Total</th>
      <th>100</th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

【讨论】：

【解决方案3】：

table{
    border-collapse: collapse;
}
th,td{
    padding: 5px;
    border: none;
}
.border-none{
    border:none;
}

<table border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Qte</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Pc</td>
      <td>1440</td>
      <td>2</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Phone</td>
      <td>1300</td>
      <td>3</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="border-none"></th>
      <th>Total</th>
      <th>100</th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

【讨论】：

看起来不像他预期的那样