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