Display a HTML table cell as a rounded box with space on the sides

Question

I'm trying to achieve a result like this Table Cell:

I tried using border-radius and background color but then it looks like this:

I only want to use CSS for a td or th no additional elements.

My Code:

.ttps-lesson {
  background: #858585;
  border-radius: 10px;
  border: 1px solid black;
}
.ttps-scheduler-table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

 <div id="ttps-content">
<div class="ttps-scheduler">
  <table class="ttps-scheduler-table">
    <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>
    <tbody>
      <tr>
        <th class="ttps-title-cell"></th>
        <th class="ttps-title-cell">Montag </th>
        <th class="ttps-title-cell">Dienstag </th>
        <th class="ttps-title-cell">Mittwoch </th>
        <th class="ttps-title-cell">Donnerstag </th>
        <th class="ttps-title-cell">Freitag </th>
      </tr>
      <tr>
        <th class="ttps-title-cell">07:45-08:30</th>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">B308</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span
                class="ttps-span-right ">B303</span></li>
          </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 ">D</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">B206</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 ">D</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">B308</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span
                class="ttps-span-right ">B303</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Kf</span><span
                class="ttps-span-right ">B202</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 ">B311</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">G</span><span class="ttps-span-center ">Hu</span><span
                class="ttps-span-right ">B203</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 ">F</span><span class="ttps-span-center ">Ib</span><span
                class="ttps-span-right ">B009/B010</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">F</span><span class="ttps-span-center ">Ib</span><span
                class="ttps-span-right ">B206</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Kf</span><span
                class="ttps-span-right ">B202</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 ">B311</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">G</span><span class="ttps-span-center ">Hu</span><span
                class="ttps-span-right ">B203</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 ">F</span><span class="ttps-span-center ">Ib</span><span
                class="ttps-span-right ">B009/B010</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul></ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">Mu</span><span class="ttps-span-center ">Wg</span><span
                class="ttps-span-right ">B002</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span
                class="ttps-span-right ">B308</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Kf</span><span
                class="ttps-span-right ">B304</span></li>
          </ul>
        </td>
      </tr>
      <tr>
        <th class="ttps-title-cell">11:35-12:20</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 ">Mu</span><span class="ttps-span-center ">Wg</span><span
                class="ttps-span-right ">B002</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span
                class="ttps-span-right ">B308</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>
            <li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">B203</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">ICT</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">A410</span></li>
            <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>
        <td class="ttps-lesson">
          <ul></ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">F</span><span class="ttps-span-center ">Ib</span><span
                class="ttps-span-right ">B203</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Jt</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>
            <li><span class="ttps-span-left ">DI</span><span class="ttps-span-center ">Gr</span><span
                class="ttps-span-right ">A415</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">ICT</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">A410</span></li>
            <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>
        <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 ">B206</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 ">B204</span></li>
            <li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Jt</span><span
                class="ttps-span-right ">A121</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 ">A415</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Jt</span><span
                class="ttps-span-right ">A120</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 ">B206</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Lf</span><span
                class="ttps-span-right ">B414</span></li>
            <li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Nf</span><span
                class="ttps-span-right ">B418</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Ve</span><span
                class="ttps-span-right ">A410</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Hl</span><span
                class="ttps-span-right ">B410</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Kb</span><span
                class="ttps-span-right ">B408</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Wb</span><span
                class="ttps-span-right ">B405</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Sf</span><span
                class="ttps-span-right ">B415</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 ">B204</span></li>
          </ul>
        </td>
      </tr>
      <tr>
        <th class="ttps-title-cell">15:15-16:00</th>
        <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 ">Ci</span><span
                class="ttps-span-right ">A121</span></li>
            <li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Jt</span><span
                class="ttps-span-right ">A120</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">SK</span><span class="ttps-span-center ">Ci</span><span
                class="ttps-span-right ">BU102</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Lf</span><span
                class="ttps-span-right ">B414</span></li>
            <li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Nf</span><span
                class="ttps-span-right ">B418</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Ve</span><span
                class="ttps-span-right ">A410</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Hl</span><span
                class="ttps-span-right ">B410</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Kb</span><span
                class="ttps-span-right ">B408</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Wb</span><span
                class="ttps-span-right ">B405</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Sf</span><span
                class="ttps-span-right ">B415</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul></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></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>
    </tbody>
  </table>
</div>
  </div>

Answer 1

You could achieve this with CSS alone - using a :before pseudo element that sits behind the text in the td. The before element therefore has the styling of the background color and the border and border-radius, and the ul sits over top of it.

Notethat I modified the styling on the ul to sit better within the tds - removing the list-style and also the pading left that browsers put on ul's.

.ttps-scheduler-table {
width: 100%;
}

.ttps-lesson {
  position: relative;
  text-align: center;
  padding: 4px;
  
}

.ttps-lesson:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 4px;
  top:4px;
  right:4px;
  bottom: 4px;
  background: #858585;
  border-radius: 10px;
  border: solid 1px #000;
  z-index: 0;
}


.ttps-lesson ul {
  position: relative;
  z-index: 1;
  list-style: none;
  padding:0;
  font-size: 12px;
  color: #fff
}

.ttps-scheduler-table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

<div id="ttps-content">
<div class="ttps-scheduler">
  <table class="ttps-scheduler-table">
    <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>
    <tbody>
      <tr>
        <th class="ttps-title-cell"></th>
        <th class="ttps-title-cell">Montag </th>
        <th class="ttps-title-cell">Dienstag </th>
        <th class="ttps-title-cell">Mittwoch </th>
        <th class="ttps-title-cell">Donnerstag </th>
        <th class="ttps-title-cell">Freitag </th>
      </tr>
      <tr>
        <th class="ttps-title-cell">07:45-08:30</th>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">B308</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span
                class="ttps-span-right ">B303</span></li>
          </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 ">D</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">B206</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 ">D</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">B308</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span
                class="ttps-span-right ">B303</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Kf</span><span
                class="ttps-span-right ">B202</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 ">B311</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">G</span><span class="ttps-span-center ">Hu</span><span
                class="ttps-span-right ">B203</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 ">F</span><span class="ttps-span-center ">Ib</span><span
                class="ttps-span-right ">B009/B010</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">F</span><span class="ttps-span-center ">Ib</span><span
                class="ttps-span-right ">B206</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Kf</span><span
                class="ttps-span-right ">B202</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 ">B311</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">G</span><span class="ttps-span-center ">Hu</span><span
                class="ttps-span-right ">B203</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 ">F</span><span class="ttps-span-center ">Ib</span><span
                class="ttps-span-right ">B009/B010</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul></ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">Mu</span><span class="ttps-span-center ">Wg</span><span
                class="ttps-span-right ">B002</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span
                class="ttps-span-right ">B308</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Kf</span><span
                class="ttps-span-right ">B304</span></li>
          </ul>
        </td>
      </tr>
      <tr>
        <th class="ttps-title-cell">11:35-12:20</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 ">Mu</span><span class="ttps-span-center ">Wg</span><span
                class="ttps-span-right ">B002</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span
                class="ttps-span-right ">B308</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>
            <li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">B203</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">ICT</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">A410</span></li>
            <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>
        <td class="ttps-lesson">
          <ul></ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">F</span><span class="ttps-span-center ">Ib</span><span
                class="ttps-span-right ">B203</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Jt</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>
            <li><span class="ttps-span-left ">DI</span><span class="ttps-span-center ">Gr</span><span
                class="ttps-span-right ">A415</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">ICT</span><span class="ttps-span-center ">Pz</span><span
                class="ttps-span-right ">A410</span></li>
            <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>
        <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 ">B206</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 ">B204</span></li>
            <li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Jt</span><span
                class="ttps-span-right ">A121</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 ">A415</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Jt</span><span
                class="ttps-span-right ">A120</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 ">B206</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Lf</span><span
                class="ttps-span-right ">B414</span></li>
            <li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Nf</span><span
                class="ttps-span-right ">B418</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Ve</span><span
                class="ttps-span-right ">A410</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Hl</span><span
                class="ttps-span-right ">B410</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Kb</span><span
                class="ttps-span-right ">B408</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Wb</span><span
                class="ttps-span-right ">B405</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Sf</span><span
                class="ttps-span-right ">B415</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 ">B204</span></li>
          </ul>
        </td>
      </tr>
      <tr>
        <th class="ttps-title-cell">15:15-16:00</th>
        <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 ">Ci</span><span
                class="ttps-span-right ">A121</span></li>
            <li><span class="ttps-span-left ">SM</span><span class="ttps-span-center ">Jt</span><span
                class="ttps-span-right ">A120</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">SK</span><span class="ttps-span-center ">Ci</span><span
                class="ttps-span-right ">BU102</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul>
            <li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Lf</span><span
                class="ttps-span-right ">B414</span></li>
            <li><span class="ttps-span-left ">C</span><span class="ttps-span-center ">Nf</span><span
                class="ttps-span-right ">B418</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Ve</span><span
                class="ttps-span-right ">A410</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Hl</span><span
                class="ttps-span-right ">B410</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Kb</span><span
                class="ttps-span-right ">B408</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Wb</span><span
                class="ttps-span-right ">B405</span></li>
            <li><span class="ttps-span-left ">NaTech</span><span class="ttps-span-center ">Sf</span><span
                class="ttps-span-right ">B415</span></li>
          </ul>
        </td>
        <td class="ttps-lesson">
          <ul></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></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>
    </tbody>
  </table>
</div>
  </div>

Answer 2

You could use padding on the cells and pseudo-elements to create the faux background:

.ttps-lesson {
    padding: 10px;
    position: relative;
}

.ttps-lesson:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: #858585;
    border-radius: 10px;
    border: 1px solid black;
}

.ttps-scheduler-table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid black;
}

<div id="ttps-content">
    <div class="ttps-scheduler">
        <table class="ttps-scheduler-table">
            <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>
            <tbody>
                <tr>
                    <th class="ttps-title-cell"></th>
                    <th class="ttps-title-cell">Montag </th>
                    <th class="ttps-title-cell">Dienstag </th>
                    <th class="ttps-title-cell">Mittwoch </th>
                    <th class="ttps-title-cell">Donnerstag </th>
                    <th class="ttps-title-cell">Freitag </th>
                </tr>
                <tr>
                    <th class="ttps-title-cell">07:45-08:30</th>
                    <td class="ttps-lesson">
                        <ul>
                            <li><span class="ttps-span-left ">D</span><span class="ttps-span-center ">Pz</span><span class="ttps-span-right ">B308</span></li>
                        </ul>
                    </td>
                    <td class="ttps-lesson">
                        <ul>
                            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span class="ttps-span-right ">B303</span></li>
                        </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 ">D</span><span class="ttps-span-center ">Pz</span><span class="ttps-span-right ">B206</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 ">D</span><span class="ttps-span-center ">Pz</span><span class="ttps-span-right ">B308</span></li>
                        </ul>
                    </td>
                    <td class="ttps-lesson">
                        <ul>
                            <li><span class="ttps-span-left ">WR</span><span class="ttps-span-center ">Tr</span><span class="ttps-span-right ">B303</span></li>
                        </ul>
                    </td>
                    <td class="ttps-lesson">
                        <ul>
                            <li><span class="ttps-span-left ">E</span><span class="ttps-span-center ">Kf</span><span class="ttps-span-right ">B202</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 ">B311</span></li>
                        </ul>
                    </td>
                    <td class="ttps-lesson">
                        <ul>
                            <li><span class="ttps-span-left ">G</span><span class="ttps-span-center ">Hu</span><span class="ttps-span-right ">B203</span></li>
                        </ul>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</div>

Answer 3

You can achieve that by add span inside td then give td padding and that will push the span.

HTMl:

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

Css:

td{
  padding: 15px 10px;
  border-radius: 5px;
  border: 1px solid #000;
}
span {
  padding: 10px;
  background: red;
  border-radius: 5px;
}

Example 1

This without changing your code:

Example 2