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而不是边框

tbody { outline: dashed }

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

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

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

Answer 2

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

<table class="float-left">
 <thead>
  <tr class="text-center">
   <th>header</th>
   <th>header</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>content</td>
   <td>content</td>
  </tr>
  <tr>
   <td>content</td>
   <td>content</td>
  </tr>
 </tbody>
</table>

这会为tbody以及主体中的所有th，tr和td元素创建边框。

在常规表中，是否可以在表上放置外边框并省去表头？

2 个答案: