时间戳

首页 > 解决方案 > 在常规表格中，有没有办法在表格上放置外边框并省略表格标题？

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

问题描述

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

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

<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 成为表格中唯一有边框的东西，当我尝试给它一个边框时，什么也没有发生。

标签： htmlcss

解决方案

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

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

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

2）使用outline而不是边框

tbody { outline: dashed }

（正负outline-offset:均可调整）

3）使用box-shadow而不是边框

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

推荐阅读