Question

我有一个html表

If Production Profit % between:
<table id="tableDataInp">
                                    <tr>
                                        <td><input type="text" value="" /></td>
                                        <td><input type="text" value="" /></td>
                                    </tr>
                                    <tr>
                                        <td><input type="text" value="" /></td>
                                        <td><input type="text" value="" /></td>
                                    </tr>
                                </table>

如何在每行末尾添加一个％符号？我尝试在每个符号后使用％符号，但％会显示在表格顶部。

https://www.screencast.com/t/hZ9gebf1m当前输出

预期的输出：https://www.screencast.com/t/7OSfvlMgV5x％应该显示在红场位置。

Answer 1

添加after pseudo属性

#tableDataInp tr:after{
  content:"%";
  color:#fff;
  width:20px;
  height:20px;
  border-radius:5px;
  background:red;
  padding:3px;

}

https://jsfiddle.net/lalji1051/s25cvyda/2/

Answer 2

您可以使用CSS和after元素来实现。

table td:last-child::after {
  content: '%';
}

<table id="tableDataInp">
    <tr>
        <td><input type="text" value="" /></td>
        <td><input type="text" value="" /></td>
    </tr>
    <tr>
        <td><input type="text" value="" /></td>
        <td><input type="text" value="" /></td>
    </tr>
</table>

因此CSS选择器选择每行的最后一个td，并添加一个内容为％

的after元素。

然后可以对after元素（边距，字体大小等）应用进一步的样式。

Answer 3

您只需在每行添加一个额外的单元格即可：

<table id="tableDataInp">
    <tr>
        <td><input type="text" value="" /></td>
        <td><input type="text" value="" /></td>
        <td width="30">%</td>
    </tr>
    <tr>
        <td><input type="text" value="" /></td>
        <td><input type="text" value="" /></td>
        <td width="30">%</td>
    </tr>
</table>

如何在HTML表格的每一行末尾添加符号

3 个答案: