如何使用HTML和CSS制作自定义表格？

Question

我想知道如何创建一个像这样的自定义表？

body {
  background-color: white;
}

table {
  border: 1px solid black;
  border-radius: 15px;
  background: lightgrey;
  color: black;
  padding-left: 15px;
  padding-right: 15px;
}

.t_head {
  background-color: dodgerblue;
}

td {
  padding-left: 10px;
  padding-right: 10px;
}

#t_body {
  background-color: grey;
}

<div id="test_div">
  <table>
    <thead>
      <tr>
        <div class="t_head">
          <th>Test Header</th>
          <th>Test Header</th>
          <th>Test Header</th>
        </div>
      </tr>
    </thead>
    <tbody>
      <div id="t_body">
        <tr>
          <th>Test data</th>
          <th>Test data</th>
          <th>Test data</th>
        </tr>
        <tr>
          <th>Test data</th>
          <th>Test data</th>
          <th>Test data</th>
        </tr>
      </div>
    </tbody>
  </table>
</div>

我试图为thead/tr元素添加一些样式,但结果几乎相同.此外,边框thead是我无法添加的.我是html和css的新手,我的搜索尝试并不是很成功.我将不胜感激任何帮助!

Answer 1

首先,修复你的html - 删除表格中的div,因为它们无效,然后你可以将蓝色放在标题中的单元格上,将灰色放在正文中的单元格上.

我已经在桌子上放了一个整个边框并隐藏了圆形边缘的溢出,然后在标题上我刚刚添加了一个底部和左边框来填充线条 - 从第一个单元格中移除左边(就像在整个表的轮廓).

边框间距只删除单元格之间的任何空间,因此边框彼此相邻(如使用边框折叠)

body {
  background-color: white;
}

table {
  overflow: hidden;
  color: black;
  border: 1px solid #000000;
  border-radius: 15px;
  border-spacing: 0;
}

thead th {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  padding: 5px 10px;
  background-color: dodgerblue;
  border-collapse: collapse;
}

thead th:first-child {
  border-left: none;
}

td {
  padding: 5px 10px;
  background: lightgrey;
}

<div id="test_div">
  <table>
    <thead>
      <tr>
        <th>Test Header</th>
        <th>Test Header</th>
        <th>Test Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test data</td>
        <td>Test data</td>
        <td>Test data</td>
      </tr>
      <tr>
        <td>Test data</td>
        <td>Test data</td>
        <td>Test data</td>
      </tr>
    </tbody>
  </table>
</div>