Question

我在下面的HTML表格中。而我想只获得第一行边框，其余只有列边框。如截图中所示。请告诉我如何在我的CSS中完成。

<table cellspacing="1" class="topbotcol">
    <thead>
        <tr>
            <th valign="middle" class="colsep rowsep" align="center">
                <span class="font-style-bold">Item</span>
            </th>
            <th valign="middle" class="colsep rowsep" align="center">&nbsp;</th>
            <th valign="middle" class="colsep rowsep" align="center">&nbsp;</th>
            <th valign="middle" class="colsep rowsep" align="center">
                <span class="font-style-bold">Qty</span>
            </th>
            <th valign="middle" class="colsep rowsep" align="center">
                <span class="font-style-bold">Unit</span>
            </th>
            <th valign="middle" class="colsep rowsep" align="center">
                <span class="font-style-bold">Rate $</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="rowsep" align="left">&nbsp;</td>
            <td class="rowsep" align="left">
                <div class="para">BUILT-UP WATERPROOF MEMBRANE PANEL ROOFING TO FLAT ROOFS AND POOL DECK</div>
            </td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
        </tr>
        <tr>
            <td class="rowsep" align="left">&nbsp;</td>
            <td class="rowsep" align="left">
                <div class="para">Preparing surfaces: priming and applying “Grims K1” slurry and “Grims Premier K10” waterproof membrane system as specified</div>
            </td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
        </tr>
        <tr>
            <td class="rowsep" align="left">&nbsp;</td>
            <td class="rowsep" align="left">
                <div class="para">Membrane collars; pointing with epoxy; reinforced with clamp rings around flanges of rainwater outlets</div>
            </td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
            <td class="rowsep" align="center">&nbsp;</td>
        </tr>
        <tr>
            <td class="rowsep" align="left">
                <div class="para">A</div>
            </td>
            <td class="rowsep" align="center">
                <div class="para">200mm diameter</div>
            </td>
            <td class="rowsep" align="center">
                <div class="para">13</div>
            </td>
            <td class="rowsep" align="center">
                <div class="para">No.</div>
            </td>
            <td class="rowsep" align="center">
                <div class="para">34.28</div>
            </td>
            <td class="rowsep" align="center">
                <div class="para">445.64</div>
            </td>
        </tr>
    </tbody>
</table>

感谢 enter image description here

Answer 1

table {
    border-top: 1px Solid Black;
    border-left: 1px Solid Black;
    border-bottom: 1px Solid Black;
    border-spacing: 0;
}
th, td {
    border-right: 1px Solid Black;
}
th {
    background-color: lightgrey;
    border-bottom: 1px Solid Black;
}

Answer 2

您可以在此处使用伪类：

由于您的表格有th表格标题，因此您可以尝试：

table.topbotcol tr:first-of-type{
     border-bottom:1px solid #ccc;   // Will apply border to first row
}
table.topbotcol tr:first-of-type td{
     border:none;  // will not apply border to tds of first row, and continue after first row
}

您尚未提供详细说明，我认为这可能会对您有所帮助！

Pseudo-Classes

文档

:first-of-type

Answer 3

您需要做的是设置边框并将表格边框设置为折叠。这将合并单元格边框。然后删除不需要的顶部和底部边框。

table, th, td{
    border: 1px solid #000;
}    
table {
    border-collapse: collapse;
}
td {
    border-bottom: none;
    border-top: none;
}

这是一个JSFiddle，它有一个更全面的例子以及更多的优化。

链接到JS Fiddle

建议：

不要在表格单元格上使用valign或align，而是使用CSS vertical-align和text-align
使用段落标记代替<div class="para">
使用描述内容的类名，而不是其样式。当您决定不再需要font-style-bold时，这有助于维护。在CSS中更改<th>比在CSS中更改它更容易，然后返回并在HTML中将所有font-style-bold更改为font-style-normal。

Answer 4

你可以通过在td和th单元格上设置边框来实现这一点，但是为td设置border-top和border-bottom none，然后设置整个表格的周围边框。

以下css就是一个例子：

table {
    border-collapse:collapse;
    border: 1px solid #000;
}

th {
    background-color: #ccc;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
}

td {
    border-left: 1px solid #000;
    padding: 5px;
}

链接到JS Fiddle

Answer 5

试试这个

http://jsfiddle.net/aYCjA/

.tbl {
    border: 1px solid black;
    border-collapse: collapse;
    min-width: 300px;
    text-align: center;
}
.tbl th, .tbl td {
    padding: 2px 5px;
}
.tbl td {
    border-left: 1px solid black;
    border-right: 1px solid black;
}
.tbl th {
    border: 1px solid black;
}

重要的是border-collapse: collapse。此属性可防止在兄弟单元格中显示重复的边框。

仅使用CSS获取列边框

5 个答案:

文档