如何使用CSS移除表格内部边框并实现角色状态栏的百分比色块效果

嘿，我来帮你搞定这个角色状态栏的需求！不管是用表格还是div，都能实现你要的40%红色、60%绿色且无黑色边框的效果，下面分别给你两种方案：

方案一：修复表格实现方式 #

你之前的代码问题主要有两个：一是给<td>加了黑色边框，二是用5个<td>分配比例太麻烦且容易出错。我们可以简化结构，直接用两个<td>对应60%绿和40%红的比例，同时去掉不必要的边框：

修改后的CSS代码 #

.border table {
  border-collapse: collapse;
  width: 235px;
  margin: 2px;
  border: none; /* 移除表格本身的边框 */
}
.border td {
  padding: 0; /* 去掉内边距，让颜色块填满单元格 */
  border: none; /* 移除黑色边框 */
  height: 20px; /* 设置状态栏高度，可按需调整 */
}
.percent60 {
  background-color: rgba(18, 148, 18, 0.7);
  width: 60%; /* 直接设置绿色部分宽度占比 */
}
.percent40 {
  background-color: #ff000d;
  width: 40%; /* 设置红色部分宽度占比 */
}

修改后的HTML代码 #

<div class="border">
  <table>
    <tr>
      <td class="percent60"></td>
      <td class="percent40"></td>
    </tr>
  </table>
</div>

方案二：用Div实现更灵活的布局*（推荐）* #

表格其实不是做这种进度条/状态栏的最佳选择，用div配合CSS布局会更简洁灵活。你之前用div没成功，大概率是没设置父容器的宽度和子元素的高度，或者没正确分配宽度比例：

方式1：Flex布局（更简便） #

CSS代码

.status-bar {
  width: 235px;
  height: 20px; /* 状态栏高度 */
  margin: 2px;
  display: flex; /* 用flex让子元素并排 */
  border: none;
}
.status-green {
  flex: 0.6; /* 占60%宽度 */
  background-color: rgba(18, 148, 18, 0.7);
}
.status-red {
  flex: 0.4; /* 占40%宽度 */
  background-color: #ff000d;
}

HTML代码

<div class="status-bar">
  <div class="status-green"></div>
  <div class="status-red"></div>
</div>

方式2：浮动布局（兼容旧环境） #

CSS代码

.status-bar {
  width: 235px;
  height: 20px;
  margin: 2px;
  overflow: hidden; /* 确保子元素不超出容器 */
}
.status-green {
  width: 60%;
  height: 100%;
  background-color: rgba(18, 148, 18, 0.7);
  float: left; /* 让元素并排 */
}
.status-red {
  width: 40%;
  height: 100%;
  background-color: #ff000d;
  float: left;
}

这样不管哪种方式，都能完美实现你要的40%红、60%绿且无黑色边框的状态栏效果啦！

内容的提问来源于stack exchange，提问作者ELATTAR-Ayoub