仅用于 <tbody> 和 <tr> 的带有边框的 HTML 绘制表格答案

【问题标题】：HTML Draw table with borders only for <tbody> and <tr>仅用于 <tbody> 和 <tr> 的带有边框的 HTML 绘制表格
【发布时间】：2018-01-02 00:23:08
【问题描述】：

我有一个 HTML 表格，如下所示：

<table >
        <thead >
                <tr><th align="center" colspan="7" style="font-weight: bold; text-decoration: underline;">TEMP</th></tr>
                <tr><th align="right" colspan="7">In Lieu of XXXX(P)-28(L)</th></tr>
                <tr><th align="center" colspan="7">RECIEPT - HQ XYZ</th></tr>
                <tr>
                    <th align="left" colspan="6">To    : 93 SDO</th>
                    <th align="left" colspan="5">Date : ________<?php ?></th>
                    </tr>
                <tr>
                    <th align="left" colspan="6">From : 993 FPO</th>
                    <th align="left" colspan="5">Sheet No:________</th>
                </tr>
            </thead>
            <tfoot>
                <tr><td  align="center" colspan="7" style="font-weight: bold; text-decoration: underline;">TEMP</td></tr>
            </tfoot>
        <tbody border="2" cellpadding="2" >
            <tr>
                <th>First Name</th>
                <th>Last Name</th>      
                <th>Points</th>
                <th>First Name</th>
                <th>Last Name</th>      
                <th>Points</th>
                <th>First Name</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Smith</td>
            </tr>

        </tbody>
    </table>

表格的 CSS 是这样的

<style>
    table { 
            page-break-inside:auto;
            border= 0px;
          }
    tr    { page-break-inside:avoid; 
            page-break-after:auto 
            border=1px solid black;
          }
    thead { display:table-header-group;
            border=1px solid black;
          }
    tfoot { display:table-footer-group;
            border= 0px;
          }
</style>

我试图只为<tbody> 和<tr> 实现边框，但它没有发生。我尝试将border 属性设置为表，thead 和foot 作为0px 和collapsed。但我无法实现。 tbody, tr, thead, tfoot 等单个标签不能声明边框属性吗？

【问题讨论】：

标签： html border

【解决方案1】：

尝试border : none; 而不是border : 0px;

【讨论】：

我们的目标是为<thead> 和<tfoot> 设置无边框，但只为<tbody> 设置边框。除非为 <table> 声明了边界，否则我不会得到边界。
@Raky 我不明白你的意思。如果你想要 <tag> 的边框，只需使用 border : 1px solid #000 ，如果你不想要，使用 border : none 。注意你应该在 css 中使用 : 而不是 =
我希望边框从开始，即 <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> <th>First Name</th> <th>Last Name</th> <th>Points</th> <th>First Name</th> </tr>'. Any other elements above this that is ` 应该没有边框，<tfoor> 应该没有边框。只有<tbody> 应该有边框。
看来<table>下面所有元素的border属性都被继承了。这意味着除非<table> 有一个属性集，否则你不能在<thead>、<tbody>、<tr>、<td> 和<tfoot> 等子元素中拥有它。