纯CSS处理仅含td元素的HTML表格且无需修改HTML的实现方案咨询

解决方案 #

你可以通过CSS的仅子元素选择器和属性选择器精准匹配分组标题行的td，无需修改HTML或使用JS即可实现需求，操作如下：

第一步：修复现有CSS语法错误 #

你现有代码中td, {多了一个多余的逗号，先修改为：

td { 
  padding: 6px; 
  border: 1px outset #fff;
  text-align: left; 
  white-space: nowrap; /*creates scrollbar on iPads */
}

第二步：在移动端媒体查询中新增分组标题适配规则 #

在你的@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)代码块末尾，新增以下规则：

/* 适配分组标题行，隐藏左侧标签、重置样式 */
td:only-child:before,
td[colspan="7"]:before {
    content: none !important;
}
td:only-child,
td[colspan="7"] {
    padding-left: 6px !important;
    font-weight: bold;
    text-align: center;
    background-color: #f5f5f5; /* 可选，添加浅灰色背景区分标题和普通数据 */
}

适配原理 #

• td:only-child 会自动匹配<tr>标签内仅有的一个<td>元素，正好对应你的分组标题行
• td[colspan="7"] 是属性选择器，直接匹配带colspan="7"属性的单元格，双重保险避免匹配失效
• 覆盖before伪元素的content属性为none即可隐藏多余的"Event"标签，同时重置padding-left避免左侧出现留白，还可自定义加粗、居中、背景色等样式优化显示效果。

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