HTML CSS表邊框未反映在行邊框上

Question

我有以下帶有樣式的HTML代碼...

下面是具有5行的表...僅表角已接界而不是行。

我希望這些行也以相同的樣式勾勒出來。

<table width="330" cellspacing="0" cellpadding="0" style="border-width:1px;border-color:black;border-style:solid;border-collapse: collapse;" >

即將推出

Answer 1

您需要在<tr>標記上設置樣式。

<tr style="border:1px solid #000"></tr>

Answer 2

由於人們似乎有點懶，因此我創建了一個演示來更好地解釋這一點。

HTML：

<table width="330" cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

CSS：

table {
    border-width:1px;
    border-color:black;
    border-style:solid;
    border-collapse:collapse;
}
tr {
    border: 1px solid;
}
td {
    width: 100px;
    height: 40px;
}

此處演示

您將邊框放在tr的行上。 如果需要這些單元格，則將其放在td 。 您還應該使用border-collapse:collapse; 在桌子上。 嘗試一下它的工作原理。 簡而言之，它將邊框折疊成單個邊框（因此它們不會彼此相鄰放置而導致更大的邊框）

CSS：

td {
    width: 100px;
    height: 40px;
    border: 1px solid;
}

此處演示

---

更新：

帶類表：

CSS：

.ruddy {
    border-width:1px;
    border-color:black;
    border-style:solid;
    border-collapse:collapse;
}

HTML：

<table class="ruddy" width="330" cellspacing="0" cellpadding="0">
</table>

此處演示

Answer 3

閱讀border-collapse 。

具體來說，您需要border-collapse: collapse;

Answer 4

實際上，表格的CSS邊框僅適用於表格，而不適用於TR ..，因為表格的CSS定義不能繼承於TR或TD

如果要在TR上具有邊框，則必須在CSS中為TR元素定義border屬性

tr
{
   border:1px solid black;
}

或對於列，請使用TD代替TR。

Answer 5

要為ROWS提供邊界，您需要另一條規則：

table tr{
    border:1px #000;
}

Answer 6

在HTML

<table width="330" cellspacing="0" cellpadding="0" class='table' >

在CSS

.table
{
   border:1px solid #000;
}
.table td,.table tr
{
border-collapse: collapse;
}

Answer 7

您應該在tr而不是表上應用樣式，因此它如下所示：

<tr style="border-width:1px;border-color:black;border-style:solid;">

但我認為，如果使用border屬性，會更容易。 輸出幾乎類似：

<table border="1" width="330" cellspacing="0" cellpadding="0" >