[英]Removing spacing between HTML table rows and columns
I am creating a table in which I want the elements to be connected at the borders(no spacing at all). 我正在创建一个表格,我希望其中的元素在边界处连接(根本没有间距)。 However, there seems to be a small gap between the rows and the columns that I cannot remove. 但是,行和列之间似乎有一个很小的间隙,我无法删除。
Here is a visual of the html: https://jsfiddle.net/sy2h8t9c/ I have set the cellspacing, border-spacing, and cellpadding to 0. 这是html的外观: https : //jsfiddle.net/sy2h8t9c/我已将cellpacing,border-spacing和cellpadding设置为0。
HTML: HTML:
<table>
<tr>
<th><div></div></th>
<th><div></div></th>
</tr>
<tr>
<th><div></div></th>
<th><div></div></th>
</tr>
<tr>
<th><div></div></th>
<th><div></div></th>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
CSS: CSS:
table, th, td {
border: none;
margin:0px;
cellspacing:0px;
border-spacing:0px;
cell-padding:0px;
}
div{
width:5px;
height:5px;
background-color:black;
display:block;
}
The current result is provided in the jsfiddle. 当前结果在jsfiddle中提供。 I am trying to make it so that it appears to be a solid black box. 我正在尝试使其看起来像一个纯黑框。 Thank you for the help. 感谢您的帮助。
Add padding: 0;
添加padding: 0;
to your code 到你的代码
table, th, td {
border: none;
margin:0px;
padding: 0;
cellspacing:0px;
border-spacing:0px;
cell-padding:0px;
}
cellspacing:0px;
Remove this. 删除它。 There used to be an HTML attribute named cellspacing
, but it was obsoleted by CSS two decades ago. 曾经有一个名为HTML属性cellspacing
,但它是由CSS二十年前废弃。
cell-padding:0px;
The property is called padding
. 该属性称为padding
。 There isn't a special version of it for tables. 它没有用于表的特殊版本。 (There used to be an HTML attribute named cellpadding
, but again, CSS came along in the '90s and it isn't needed any more). (曾经有一个名为cellpadding
的HTML属性,但是同样,CSS在90年代问世,不再需要了)。
table, th, td { border: none; margin: 0px; padding: 0; border-spacing: 0px; } div { width: 5px; height: 5px; background-color: black; display: block; }
<table> <tr> <th> <div></div> </th> <th> <div></div> </th> </tr> <tr> <th> <div></div> </th> <th> <div></div> </th> </tr> <tr> <th> <div></div> </th> <th> <div></div> </th> </tr> <tr> <td> <div></div> </td> <td> <div></div> </td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.