Question

我正在创建一个表，但我的问题是表边框无效，因为它调用了其他一些css。

margin: 0; padding: 0; border: 0;

那么如何覆盖margin: 0;padding: 0; border: 0;，以便我可以轻松获得桌边。

感谢任何帮助。

Answer 1

不是边距和填充，而是隐藏边框的border: 0。

为表格添加规则，例如：

td {
    border: 1px solid black;
}

显示td边框。这同样适用于table标记。您可能还想查看border-collapse代码table的{{1}}属性。{/ p>

演示：https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

此外，如果不是绝对必要，我建议你不要使用任何内联样式定义。

Answer 2

从CSS中删除border:0。

看看这里：

<强> DEMO

Answer 3

最好能为表使用class并通过CSS应用它。

<强> HTML

<table class="testclass">
        <tbody>
            <tr>
                <td>
                    <span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>ID Number</strong></span></span></td>
                <td>
                    <span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>Room Name</strong></span></span></td>
                <td>
                    <span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>Name of Company</strong></span></span></td>
            </tr>
            <tr>
                <td>
                    <span style="color:#000000;"><strong><span style="font-family:verdana,geneva,sans-serif;">1</span></strong></span></td>
                <td>
                    <span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;">Premier</span></span></td>
                <td>
                    Amsh Ltd</td>
            </tr>
</tbody>
</table>

<强> CSS

table.testclass
{
border-top:1px solid #000;
border-left:1px solid #000;
border-collapse:collapse;
width:800px;
}
table.testclass td
{
border-right:1px solid #000;
border-bottom:1px solid #000;
padding:5px;
}

FIDDLE DEMO

Answer 4

你的边界不起作用的原因是因为你正在使用＆＃34; border-collapse：collapse＆＃34;在tbody上。您需要在桌面样式上使用它。

这是您需要使用的CSS

table,td{
    border: 1px solid black;
    padding: 5px;
    margin: 1px;
}

以下是HTML更改。请注意＆＃34;边界崩溃：崩溃＆＃34;在表中，但不是你的问题。

<table border="10" cellpadding="10" cellspacing="10" style="width: 800px;border-collapse: collapse;">

            <tbody style="border: 1px solid black; ">

以下是fiddle

希望有所帮助。

我如何覆盖保证金：0;填充：0;边界：0; CSS样式

4 个答案: