Question

1）我需要制作一个表格，其中一行没有这样的边框（此表有一行3行，但实际上在我的问题中，它有很多行）

+---------+---------+               +---------+---------+ 
|         |         |               |         |         |
+---------+---------+               +---------+---------+
|         |         |      --> 
+---------+---------+               +---------+---------+
|         |         |               |         |         |
+---------+---------+               +---------+---------+

我该怎么做？

2）我需要创建另一个具有不同行宽度的表。但在这里我为width: 350px;设置了td。那么对于新表，我该如何更改行宽？

＆＃13;

.frame {
    border-collapse: collapse;
    margin-right: 80px;
    height: 100%;
    font-size: 11pt;
}

table, th, td{
    border-collapse: collapse;
    border: 1px solid black;
    margin-left:80px;
}

td {
    vertical-align: top;
    width: 350px;
    height: 20px;
    padding-left: 6px;
    padding-bottom: 5px;
}

th {
    width: 350px;
    padding-left: 6px;
}

＆＃13;

<div class ='frame'>
    <table style ='margin-top:20px; font-weight: bold'>
        <tr>
            <td>(0,1)</td>
            <td>(0,2)</td>
        </tr>
        <tr>
            <td>(1,0)</td>
            <td>(1,1)</td>
        </tr>
        <tr>
            <td>(3,0)</td>
            <td>(3,1)</td>
        </tr>
    </table>
</div>

＆＃13;

Answer 1

像这样，删除table上的边框，在这种情况下，将其设置在td上，然后将其从第二个tr删除{ {1}}Š

td

.frame {
    margin-right: 80px;
    height: 100%;
    font-size: 11pt;
    margin-left:80px;
}

.tbl-special {
    border-collapse: collapse;
    margin-top:20px;
    font-weight: bold
}

.tbl-special td {
    vertical-align: top;
    width: 350px;
    height: 20px;
    padding-left: 6px;
    padding-bottom: 5px;
    border: 1px solid black;        /* moved from "table, tr, td" rule */
}

.tbl-special th {
    width: 350px;
    padding-left: 6px;
}

.tbl-special tr:nth-child(2) td {
    border: none;                   /* remove all borders on second row */
}

您也可以使用以下规则，但在这种情况下无关紧要，因为您在<div class ='frame'> <table class='tbl-special'> <tr> <td>(0,1)</td> <td>(0,2)</td> </tr> <tr> <td>(1,0)</td> <td>(1,1)</td> </tr> <tr> <td>(3,0)</td> <td>(3,1)</td> </tr> </table> </div>上使用了border-collapse: collapse;

table

CSS：如何删除表格中一行的左右边框？

1 个答案: