Question

我的html页面中有一个表，在许多搜索都没有找到CSS或html attr之后，我想在表的最后一行进行缩进！

该表如下所示：

+----------+-----+-----+-----+
| a        | foo | 100 | 300 | 
| b        | bar | 200 | 400 | 
| Sum      | 300 | 700 |-----+ 
+----------+-----+-----+

，并希望使最后一行缩进像这样：

+----------+-----+-----+-----+
| a        | foo | 100 | 300 | 
| b        | bar | 200 | 400 | 
+----------| Sum | 300 | 700 |
           +-----+-----+-----+

我曾尝试在 tr 和 td 上使用向左填充，但没有任何反应

Answer 1

您只需将最后一行的第一个单元格留空并删除其边框即可。

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 5px;
}

.noBrd {
  border: none;
}

<table>
  <tr>
    <td>a</td>
    <td>foo</td>
    <td>100</td>
    <td>300</td>
  </tr>
  <tr>
    <td>b</td>
    <td>bar</td>
    <td>200</td>
    <td>400</td>
  </tr>
  <tr>
    <td class="noBrd"></td>
    <td>Sum</td>
    <td>300</td>
    <td>700</td>
  </tr>
</table>

Answer 2

<table>
<tr>
  <td>AB</td>
  <td>AB</td>
  <td>AB</td>
  <td>AB</td>
</tr>
 <tr style="padding-left:5px;border-width:1px;border-color:Red;">
  <td>AB</td>
  <td>AB</td>
  <td>AB</td>
  <td>AB</td>
</tr>
 <tr>
  <td>AB</td>
  <td>AB</td>
  <td>AB</td>
  <td>AB</td>
</tr>
 <tr style="padding-left:5px;border:1px none Black;">
  <td>AB</td>
  <td>AB</td>
  <td>AB</td>
  <td>AB</td>
</tr>

这是表格的另一个示例。

缩进HTML表格行

2 个答案: