仅使用 CSS 重新排列表格中的元素

Question

我需要在表格的列表中将 3 个跨度居中。

现在看起来像这样：spans not properly centered 但我希望它看起来像这样：span properly centered

ul {
  text-align: center;
  list-style-position: inside;
  list-style-type: none
}
li {
  display: grid; 
  grid-template-columns: 1fr 2.5fr 1fr; 
  gap: NaNpx 2%; 
  grid-template-areas:
    "subject teacher room"; 
  justify-content: center; 
  align-content: center; 
  justify-items: center; 
  align-items: center;
}
body {
  text-align: center;
}
.ttps-span-center {
  font-weight: normal;
  grid-area: teacher;
}
.ttps-span-right {
  font-weight: bold;
  grid-area: room;
}
.ttps-span-left {
  font-weight: bold;
  grid-area: subject;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<table class="ttps-scheduler-table table table-bordered border-dark"><colgroup><col style="width:(100/6)%" /><col style="width:(100/6)%" /><col style="width:(100/6)%" /><col style="width:(100/6)%" /><col style="width:(100/6)%" /><col style="width:(100/6)%" /></colgroup><tr><th class="ttps-title-cell" ></th><th class="ttps-title-cell" >Monday 25.10.2021</th><th class="ttps-title-cell" >Tuesday 26.10.2021</th><th class="ttps-title-cell" >Wednesday 27.10.2021</th><th class="ttps-title-cell" >Thursday 28.10.2021</th><th class="ttps-title-cell" >Friday 29.10.2021</th></tr><tr><th class="ttps-title-cell" >07:45-08:30</th><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Jd</span><span class="ttps-span-right " >B202</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">FCE</span><span class="ttps-span-center ">Jd</span><span class="ttps-span-right " >B206</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">F</span><span class="ttps-span-center ">Ca,Pt</span><span class="ttps-span-right " >B207</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Jd</span><span class="ttps-span-right " >B211</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">MR</span><span class="ttps-span-center ">Bs</span><span class="ttps-span-right " >A510</span></li></ul></td></tr><tr><th class="ttps-title-cell" >08:40-09:25</th><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Jd</span><span class="ttps-span-right " >B202</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Oe</span><span class="ttps-span-right " >B303</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">F</span><span class="ttps-span-center ">Ca,Pt</span><span class="ttps-span-right " >B207</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Wh</span><span class="ttps-span-right " >B208</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">Kl</span><span class="ttps-span-center ">Bs</span><span class="ttps-span-right " >A510</span></li></ul></td></tr><tr><th class="ttps-title-cell" >09:45-10:30</th><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">BG</span><span class="ttps-span-center ">Mi</span><span class="ttps-span-right " >A513</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Oe</span><span class="ttps-span-right " >B303</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">M</span><span class="ttps-span-center ">Bs</span><span class="ttps-span-right " >A510</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">F</span><span class="ttps-span-center ">Ca,Pt</span><span class="ttps-span-right " >B211</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Wh</span><span class="ttps-span-right " >B202</span></li></ul></td></tr><tr><th class="ttps-title-cell" >10:40-11:25</th><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">BG</span><span class="ttps-span-center ">Mi</span><span class="ttps-span-right " >A513</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">Gg</span><span class="ttps-span-center ">Ws</span><span class="ttps-span-right " >B312</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Wh</span><span class="ttps-span-right " >B211</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">FCE</span><span class="ttps-span-center ">Jd</span><span class="ttps-span-right " >B211</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Wh</span><span class="ttps-span-right " >B202</span></li></ul></td></tr><tr><th class="ttps-title-cell" >11:35-12:20</th><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">ICT</span><span class="ttps-span-center ">Bs,Sc</span><span class="ttps-span-right " >B335</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">Gg</span><span class="ttps-span-center ">Ws</span><span class="ttps-span-right " >B312</span></li></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">M</span><span class="ttps-span-center ">Bs</span><span class="ttps-span-right " >A414</span></li></ul></td><td class="ttps-lesson" ><ul></ul></td></tr><tr><th class="ttps-title-cell" >12:30-13:15</th><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Oe</span><span class="ttps-span-right " >B309</span></li></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">SK</span><span class="ttps-span-center ">Ld</span><span class="ttps-span-right " >BU201</span></li><li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Kf</span><span class="ttps-span-right " >A120</span></li></ul></td></tr><tr><th class="ttps-title-cell" >13:25-14:10</th><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">G</span><span class="ttps-span-center ">De,En</span><span class="ttps-span-right " >B316</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Oe</span><span class="ttps-span-right " >B309</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B414</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B410</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B418</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B405</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B415</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B408</span></li><li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >A410</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">M</span><span class="ttps-span-center ">Bs</span><span class="ttps-span-right " >A312</span></li></ul></td></tr><tr><th class="ttps-title-cell" >14:20-15:05</th><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">DI</span><span class="ttps-span-center ">Gr</span><span class="ttps-span-right " >B208</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">G</span><span class="ttps-span-center ">De,En</span><span class="ttps-span-right " >B316</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">SK</span><span class="ttps-span-center ">Ld</span><span class="ttps-span-right " >BU201</span></li><li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Kf</span><span class="ttps-span-right " >A120</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B414</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B410</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B418</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B405</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B415</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B408</span></li><li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >A410</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">M</span><span class="ttps-span-center ">Bs</span><span class="ttps-span-right " >A312</span></li></ul></td></tr><tr><th class="ttps-title-cell" >15:15-16:00</th><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">DI</span><span class="ttps-span-center ">Gr</span><span class="ttps-span-right " >B208</span></li></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">SK</span><span class="ttps-span-center ">Ld</span><span class="ttps-span-right " >BU201</span></li><li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Kf</span><span class="ttps-span-right " >A120</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B414</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B410</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B418</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B405</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B415</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B408</span></li><li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >A410</span></li></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">F</span><span class="ttps-span-center ">Ca,Pt</span><span class="ttps-span-right " >B211</span></li></ul></td></tr><tr><th class="ttps-title-cell" >16:10-16:55</th><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B414</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B410</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B418</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B405</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B415</span></li><li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >B408</span></li><li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Wb,Sf,Nf,Hl,Li,Ve,Kg</span><span class="ttps-span-right " >A410</span></li></ul></td><td class="ttps-lesson" ><ul></ul></td></tr><tr><th class="ttps-title-cell" >17:05-17:50</th><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul></ul></td><td class="ttps-lesson" ><ul></ul></td></tr></table>

另外，这是我的代码笔：

https://codepen.io/momonunu-the-encoder/pen/dyzvoJg

谢谢。

Answer 1

您只需要在ttps-lesson 类中从ul 中删除padding-left，然后一切都会很好。 这是一种引导风格。 (padding-left: 2rem)

或者只是将padding-left:0; 添加到ul 样式中。