如何使用CSS设置表格整体蓝边框并为指定单元格设置红色边框？

没问题！这种需求其实用CSS选择器的优先级就能轻松实现，完全不用依赖HTML属性，我给你一步步讲清楚怎么做：

核心思路 #

• 给整个表格设置统一的边框规则，通过border-collapse: collapse让边框合并成单一边框，避免出现间隙；
• 给表格里的所有单元格（<th>/<td>）默认设置蓝色边框；
• 给需要特殊样式的跨列单元格单独加一个类，用类选择器覆盖它的边框颜色为红色，利用类选择器比元素选择器更高的优先级，不用额外加!important也能生效。

完整代码示例 #

HTML结构 #

<table class="blue-border-table">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>普通单元格</td>
      <td>普通单元格</td>
      <td>普通单元格</td>
    </tr>
    <tr>
      <!-- 这个是跨列的特殊单元格 -->
      <td colspan="3" class="red-border-cell">跨列红色边框单元格</td>
    </tr>
    <tr>
      <td>普通单元格</td>
      <td>普通单元格</td>
      <td>普通单元格</td>
    </tr>
  </tbody>
</table>

CSS样式 #

/* 表格基础样式 */
.blue-border-table {
  width: 100%;
  /* 关键：合并表格边框，让整体边框统一 */
  border-collapse: collapse;
  /* 表格外层的蓝色边框（可选，如果需要表格整体也有蓝色外框的话） */
  border: 2px solid blue;
}

/* 所有单元格默认蓝色边框 */
.blue-border-table th,
.blue-border-table td {
  border: 2px solid blue;
  padding: 8px;
  text-align: left;
}

/* 特殊单元格的红色边框，覆盖默认蓝色 */
.blue-border-table .red-border-cell {
  border: 2px solid red;
}

补充说明 #

• 如果不需要表格外层的蓝色边框，直接删掉.blue-border-table里的border属性就行；
• 不管这个单元格跨多少列（colspan值是多少），只要给它加上.red-border-cell类，就能自动应用红色边框；
• 这种方法完全符合你的要求：只用CSS，没有任何HTML属性（比如border这类废弃属性），而且样式维护起来也很方便，后续要改颜色或者加其他特殊单元格，直接加类就行。

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