html - 在常规表格中，有没有办法在表格上放置外边框并省略表格标题？

Question

我有一个表格，表格的顶部是带有一些文本的表格标题。我希望能够只在表体上放置一个边框，而表头保持不变，但我不知道该怎么做。

我只尝试将边框应用于表体的默认类。

<table class="float-left">
 <thead>
  <tr class="text-center">
   <th>
    This is some text I want outside of the border
   </th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    This is some cell data I want inside the border
   </td>
  </tr>
 </tbody>
</table>

我所需要的只是让 tbody 成为表格中唯一带边框的东西，当我尝试给它一个边框时，没有任何反应。

Answer 1

有几种方法可以得到这个!

首先也是最直接的:添加border-collapse到表格

table { border-collapse: collapse }
tbody { border: dashed }

2) 使用outline 而不是border

tbody { outline: dashed }

(正负outline-offset:均可用于调整)

3) 使用box-shadow 而不是边框​​

tbody { box-shadow: 0 0 0 1px }