css 在表格中添加默认文字居中

在web开发中，表格是常用的数据展示方式之一。但是，在表格中添加一些提示文字或默认值，往往会出现不居中的问题，影响美观度。本文将介绍如何使用CSS解决这一问题。

table {
      border-collapse: collapse;
      width: 100%;
}
td {
      padding: 10px;
      text-align: center;
      position: relative;
}
td:before {
      content: attr(data-default);
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
}
td:focus:before, td:not([data-default]):before {
      opacity: 0;
}
    

以上代码通过在每个

在HTML中，需要给单元格添加 data-default 属性，以指定该单元格的默认文字内容。例如：

table>
      tr>
        td data-default="请输入内容">
    /td>
        td data-default="请输入内容">
    /td>
      /tr>
    /table>
    

这样，我们就可以在表格单元格中添加默认文字，并且保证其居中了。希望这个小技巧对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！