我可以用 `<table>` + css: `table{...}` 替换 <table border=1>' 吗？答案

【问题标题】：Can I replace <table border=1>' with `<table>` + css: `table{...}`?我可以用 `<table>` + css: `table{...}` 替换 <table border=1>' 吗？
【发布时间】：2011-03-22 16:45:07
【问题描述】：

如果没有border=1 语句，table{border:1px solid #000;} 似乎无法工作。与将<input width=30> 更改为input{width:400px;} 相同，我想使用<table> 并仅在css 中声明边框。这可能吗？

更新我的错误是使用

table{border-width:1px;}

而不是例如

table{border:1px solid #000;}

——效果很好。

【问题讨论】：

这不是同一类型的边框，但是是的，这应该是您需要做的所有事情。
你能给出一些代码吗？如果您试图内联声明样式，那么这不是这样做的方法。（不要介意它不受欢迎的事实。）见jsfiddle.net/pgtWH/1

标签： html css border css-tables

【解决方案1】：

使用这个 CSS：

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

Live Demo

border-collapse: collapse 很重要；没有它你会得到双边框，like this。

【讨论】：

collapse 小费是一百万，非常感谢！
border="1" 似乎创建了一种“3D”边框？顶部和左侧边缘插入以及右侧和底部边缘开始？如何重现这种效果？

【解决方案2】：

绝对 - 这是首选方式。您可能需要设置td 和tr 的样式。

【讨论】：

但如果我使用<table>，css 样式似乎不适用？
它将应用于表格的外部，而不是单元格。

【解决方案3】：

在 CSS 中试试这个

 table
    {
    border:1px solid black;
    }

然后你可以在 HTML 中使用它

<table>
....
</table>

【讨论】：

【解决方案4】：

是的，但是如果您使用table，它将影响您 html 中的所有表格。

我建议这样做：

<table class="myTable"> 然后.myTable { /*css*/ }

【讨论】：

【解决方案5】：

你的风格应该是：

table td { border: 1px solid #000000; }

查看工作示例here。

【讨论】：

粘贴前忘记复制链接了。
只是让您知道，该示例仅有效，因为 jsFiddle 在其重置中包含table { border-collapse: collapse }：（http://fiddle.jshell.net/css/normalize.css）。看我的回答。

【解决方案6】：

如果您使用 <th> 表示标题，使用下面的代码，您将不会在我们的标题周围获得边框：

td { border: 1px solid #000000; }

您还需要添加：

th { border: 1px solid #000000; }

问候，

【讨论】：