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;
}

DEMO HERE

您将tr的边框设置为行。如果您想要将单元格放在td上。您还应该在表格中使用border-collapse:collapse;。玩一下它，看看它是如何工作的。简而言之，它会将边框折叠成单边框（因此它们不会彼此相邻，从而导致更大的边框）

CSS：

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

DEMO HERE

---

更新

带有类的表：

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>

DEMO HERE

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

in 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" >