单个带边框表格单元格（td）的CSS代码翻译与技术问询改写

嘿，刚好做过类似的需求，分享给你一个简单的实现方案，能轻松让表格里部分单元格带边框，其余的去掉边框：

CSS 样式代码 #

table { 
  border-collapse: collapse; 
  margin: 100px auto; 
}
td { 
  margin: 0px; 
  padding: 5px; 
  text-align: left; 
  border: 1px solid #080808; 
}
.border { 
  border: 1px solid #080808; 
}
.noborders td { 
  border: 0; 
}
.border_single { 
  border: 1px solid #080808; 
}

HTML 结构代码 #

<table>
  <tbody class="border">
    <tr>
      <td>带边框的表格单元格</td>
      <td>带边框的表格单元格</td>
      <td>带边框的表格单元格</td>
    </tr>
    <tr class="noborders">
      <td>无边框的表格单元格</td>
    </tr>
  </tbody>
</table>

简单说下实现逻辑： #

• 给table设置border-collapse: collapse是核心，能让表格边框合并，避免出现双边框的尴尬情况；
• 默认给所有td加上基础边框样式，之后给不需要边框的<tr>套上noborders类，直接覆盖掉td的边框样式，就能实现“部分单元格无边框”的效果；
• 如果想单独给某一个td加边框，直接给它加border_single类就可以啦。

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