时间戳

首页 > 解决方案 > 将 HTML 表格单元格显示为两侧有空格的圆角框

html - 将 HTML 表格单元格显示为两侧有空格的圆角框

问题描述

我正在尝试获得像这样的表格单元格的结果：

在此处输入图像描述

我尝试使用border-radius和背景颜色，但它看起来像这样：

在此处输入图像描述

我只想将 CSS 用于一个td或th 没有附加元素。

我的代码：

.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>

标签： htmlcsshtml-table

解决方案

您可以通过在span内部添加td然后提供td填充来实现这一点，这将推动跨度。

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;
}

示例 1

这无需更改您的代码：

示例 2

推荐阅读