CSS在Table列右上角添加标记简单实现

实现效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Ribbon Demo</title>
  <style>
    /* 设置表格样式 */
    table {
      width: 300px;
      border-collapse: collapse;
      margin: 50px auto;
      border: 1px solid #ddd;
    }
    .tdDiv {
      text-align: center;
      vertical-align: middle;
      font-size: 18px;
      padding: 20px;
      border: 1px solid #ddd;
      position: relative; /* 让伪元素相对于每个 td 定位 */
    }
    /* 为每个 <td> 元素添加标签样式 */
    tr::after {
      content: "已接收";
      position: absolute;
      top: -10px;
      right: -10px;
      background: red;
      color: white;
      padding: 5px 10px;
      font-size: 14px;
      transform: rotate(45deg);
      z-index: 1;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>

  <table>
    <tr class="tdDiv">
      <td >第一行内容</td>
    </tr>
    <tr>
      <td>第二行内容</td>
    </tr>
    <tr class="tdDiv">
      <td >第三行内容</td>
    </tr>
  </table>

</body>
</html>

这是简单demo，可自行套用自己要实现的功能

posted @ 2024-11-19 17:10  一剑天门  阅读(17)  评论(0)  编辑  收藏  举报