html - 在 CSS 中将表格的边框宽度设置得更细？

Question

<table width='100%'  cellpaddin='0' border= '1' cellspacing='0' >

这就是我创建表的方式。边框宽度看起来很粗。我不能放像 0.5px 或其他东西。无论如何都可以减小它的宽度吗？

Answer 1

首先，您应该使用折叠边框border-collapse: collapse;，border您正在设置的使用浏览器默认样式有点 3d，您可以使用border-style: solid;以及table，td考虑使用下面的方法，而不是使用属性，使用 CSS 应用边框

table.class_name {
   border-collapse: collapse;
}

table.class_name td {
   border: 1px solid #aaa;
   padding: 5px;
}

演示

Answer 2

样式化 td 和 th 元素

td, th {
    border: 1px solid black;
}

并且对于单元格之间没有间距，请使用：

table {
    border-collapse: collapse;
}

请参阅 jsFiddle 示例：http: //jsfiddle.net/KbjNr/

Answer 3

不要再使用 html 属性（宽度、单元格填充、边框、单元格间距）。使用 CSS。很多人不喜欢 W3Schools，但我认为他们会在这里为您提供帮助 - http://www.w3schools.com/css/css_table.asp 。对于边框，您可以使用类似

table { border:1px solid;}

Answer 4

在表格标签上使用边框折叠：

table {
     border-collapse: collapse;
}

这将确保您的边界不会在两侧相遇的地方加倍。如果那看起来仍然太暗，只需使用较浅的边框颜色即可。

Answer 5

试试这个：http: //jsfiddle.net/LXKLW/

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

CSS：

table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid #ccc;
}