I need to center 3 spans in a list in a table.
Right now it looks like this: spans not properly centered But I want it to look like this: 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Also, here is my codepen:
https://codepen.io/momonunu-the-encoder/pen/dyzvoJg
Thank you.
CodePudding user response:
You just need to remove padding-left
from your ul
inside the ttps-lesson
class and then everything will be just great.
This is a bootstrap style. (padding-left: 2rem
)
Or just add padding-left:0;
into ul
styles.