如何在带文本的矩形内制作小正方形？附Bootstrap表格复现场景

嘿，我已经搞定啦！用HTML和CSS完美复现了目标截图的效果，还搭建了对应的演示环境。这次我选用Bootstrap 4来构建表格组件，以下是生成表格行的核心代码片段：

HTML 代码 #

<div class="body-manage-attendees"> 
  <table class="table table-hover"> 
    <thead> 
      <tr> 
        <th scope="col">Name</th> 
        <th scope="col" class="number">Number</th> 
        <th scope="col" class="table2">...</th>
      </tr>
    </thead>
    <!-- 这里可以添加表格的tbody行内容 -->
  </table>
</div>

CSS 代码 #

针对表格的自定义样式（比如调整列宽、对齐方式等），我写了这些规则：

/* 容器样式，控制表格的布局范围 */
.body-manage-attendees {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 自定义数字列的样式 */
.number {
  width: 15%;
  text-align: center;
  font-weight: 500;
}

/* 右侧操作列的样式 */
.table2 {
  width: 20%;
  text-align: right;
}

内容的提问来源于stack exchange，提问作者flash