将HTML表格单元格显示为边上有空格的圆形框

我正试图获得如下表格单元格所示的结果：

我尝试使用

边框半径

和背景色，但结果如下：

我只想将CSS用于

td

或

th

无其他元素

我的代码：

.ttps课程{
背景#8585；
边界半径：10px；
边框：1px纯黑；
}
.ttps调度程序表{
边界塌陷：塌陷；
}
表，th，td{
边框：1px纯黑；
}

蒙塔格
迪恩斯塔格
米特沃克
唐纳斯塔格
弗雷塔格
07:45-08:30

DPzB308


WRTrB303




DPzB206

08:40-09:25

DPzB308


WRTrB303


EKfB202


GgWsB311


GHuB203

09:45-10:30

FIbB009/B010


FIbB206


EKfB202


GgWsB311


GHuB203

10:40-11:25

FIbB009/B010



MuWgB002


WRTrB308


EKfB304

11:35-12:20



MuWgB002


WRTrB308


12:30-13:15

DPzB203


ICTPzA410
MRBsA510



FIbB203


SMJtA120

13:25-14:10

DIGrA415


ICTPzA410
MRBsA510


MBsB206



MBsB204
SMJtA121

14:20-15:05

DIGrA415


SMJtA120


MBsB206


CLfB414
CNfB418
NaTechVeA410
NaTechHlB410
NaTech KBB408
NaTechWbB405
NaTechSfB415


MBsB204

15:15-16:00


SKCiA121
SMJtA120


SKCiBU102


CLfB414
CNfB418
NaTechVeA410
NaTechHlB410
NaTech KBB408
NaTechWbB405
NaTechSfB415


16:10-16:55





17:05-17:50

您可以通过在

td

内部添加

span

来实现这一点，然后进行

td

填充，这将推动span

HTMl:

在不更改代码的情况下执行以下操作：

---

您可以在单元格和伪元素上使用填充来创建人造背景：

.ttps课程{
填充：10px；
位置：相对位置；
}
.ttps课程：之前{
内容：''；
位置：绝对位置；
顶部：5px；
左：5px；
宽度：计算（100%-10px）；
高度：计算（100%-10px）；
背景#8585；
边界半径：10px；
边框：1px纯黑；
}
.ttps调度程序表{
边界塌陷：塌陷；
}
桌子
th，
运输署{
边框：1px纯黑；
}

<tr>
  <td><span>James</span></td>
  <td><span>James</span></td>
</tr>