表格边框不可见的错误答案

【问题标题】：bug where the border of the table is not visible表格边框不可见的错误
【发布时间】：2021-08-12 09:09:05
【问题描述】：

我不明白为什么第一个 tbody tr 的 td 的边框不可见。

我认为没有理由不显示边框。

我猜是这个。

如果 th 的自然高度高于为 th 固定的高度 i，则第一个 tbody tr 的 td 可见。
如果没有代码th{height: xxpx; }，第一个 tbody tr 的 td 是可见的。

.table {
  border-spacing: 0;
  border-collapse: collapse;
}

.table.summary-style
{
    font-size: 11px;

    width: 100%;

    table-layout: fixed;

    text-align: center;

    color: #666;
    border-bottom: 1px solid #666;
    background: #fff;
}

.table.summary-style caption
{
    font-size: 0;
    line-height: 0;

    display: none;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);

    width: 0;
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
}

.table.summary-style thead th
{
    font-size: 16px;
    line-height: 1;

    position: relative;

    box-sizing: border-box;
    height: 38px;
    padding: 5px 4px;

    text-align: center;
    vertical-align: middle;

    color: #666;
    background: #ddd;
}

.table.summary-style > tbody > tr > td
{
    font-size: 13px;
    line-height: 1.38;

    box-sizing: border-box;
    height: 36px;
    padding: 4px 10px;

    text-align: left;
    vertical-align: middle;

    color: #666;
    border-top: 1px solid #666;
    background: #fff;
}

<table class="table summary-style">
         
         
        <thead>
            <tr>
                <th scope="col">title</th>
                <th scope="col">title</th>
                <th scope="col">title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">No Data.</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>

【问题讨论】：

边框可见？如果您的意思是侧面没有边框，请将border-top:`换成border:
也许我可以改变你建议的方式。但我仍然不明白为什么浏览器不呈现边框。我想知道为什么。它只是错误吗？我找不到像这样的错误的文章。
这不是错误。通过编写 `border-top` ，您已指定您只希望边框显示在 top
我已经将border-top 写入了tbody 的td。
我认为即使我不更改代码，tbody 的第一个 tr 的 td 的边框顶部也应该是可见的。

标签： css html-table border

【解决方案1】：

发生这种情况是因为.table.summary-style thead th 上的position: relative; 导致该行元素出现在其他元素边界的“上方”。尽管已经使用了box-sizing: border-box;，但表格元素的边框已经折叠在一起。解决方案是要么删除第一行的position: relative;，要么从.table 中删除border-collapse: collapse;。

.table {
  border-spacing: 0;
  border-collapse: collapse;
}

.table.summary-style
{
    font-size: 11px;

    width: 100%;

    table-layout: fixed;

    text-align: center;

    color: #666;
    border-bottom: 1px solid #666;
    background: #fff;
}

.table.summary-style caption
{
    font-size: 0;
    line-height: 0;

    display: none;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);

    width: 0;
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
}

.table.summary-style thead th
{
    font-size: 16px;
    line-height: 1;

    box-sizing: border-box;
    height: 38px;
    padding: 5px 4px;

    text-align: center;
    vertical-align: middle;

    color: #666;
    background: #ddd;
}

.table.summary-style > tbody > tr > td
{
    font-size: 13px;
    line-height: 1.38;

    box-sizing: border-box;
    height: 36px;
    padding: 4px 10px;

    text-align: left;
    vertical-align: middle;

    color: #666;
    border-top: 1px solid #666;
    background: #fff;
}

<table class="table summary-style">
         
         
        <thead>
            <tr>
                <th scope="col">title</th>
                <th scope="col">title</th>
                <th scope="col">title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">No Data.</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>

【讨论】：

谢谢。我完全理解为什么会这样！

【解决方案2】：

试试：

table,
td,
th {
  border-collapse: collapse;
  padding: 0.5em 1em;
  border: 2px solid black;
}

.table.summary-style {
  font-size: 11px;
  width: 100%;
  table-layout: fixed;
  text-align: center;
  color: #666;
  border-bottom: 1px solid #666;
  background: #fff;
}

.table.summary-style caption {
  font-size: 0;
  line-height: 0;
  display: none;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.table.summary-style thead th {
  font-size: 16px;
  line-height: 1;
  position: relative;
  box-sizing: border-box;
  height: 38px;
  padding: 5px 4px;
  text-align: center;
  vertical-align: middle;
  color: #666;
  background: #ddd;
}

.table.summary-style>tbody>tr>td {
  font-size: 13px;
  line-height: 1.38;
  box-sizing: border-box;
  height: 36px;
  padding: 4px 10px;
  text-align: left;
  vertical-align: middle;
  color: #666;
  border-top: 1px solid #666;
  background: #fff;
}

<table class="table summary-style">
        <thead>
            <tr>
                <th scope="col">title</th>
                <th scope="col">title</th>
                <th scope="col">title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">No Data.</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>

【讨论】：