这似乎微不足道,但我似乎无法绊倒答案.
我希望在HTML表格中将行分隔开来,仅此而已.很简单吧?
一些谷歌搜索带来了我的表属性rules,但显然这在HTML5中不受支持.
所以我深入研究了CSS并意识到我可以把边框放在周围tr,对吗?好吧不,这不仅不起作用,而且许多SO线程 | 向我保证这是一个坏主意.
从逻辑上讲,我玩他们的解决方案,其中涉及不同的组合tr { border-bottom ...,但我总是最终得到这个微小的,令人讨厌的差距.有什么差距?两者之间有一个或两个像素的间隙td(分隔列的线将是).这似乎不是什么大问题,但似乎没必要,我不能不停止注意它.无论出于何种原因,它都没有出现在jsfiddle中,所以我建议在记事本中尝试这个并在浏览器中打开它.
我犯了一个愚蠢的错误吗?这是一个错字吗?只是我的电脑?非常感谢任何帮助......我一直盯着这个问题太久了.
这是我的测试文件,我一直在Chrome和Android中测试.它确实需要同时工作,因为这也将在Phonegap应用程序中运行,该应用程序在手机浏览器中呈现HTML5.
<html>
<head>
<style>
td, th {
border-bottom: 1px solid black !important;
}
</style>
</head>
<body>
<table>
<tr>
<th>Item</th>
<th>Aisle</th>
</tr>
<tr>
<td>Cookies</td>
<td>2</td>
</tr>
<tr>
<td>Crackers</td>
<td>6</td>
</tr>
<tr>
<td>Milk</td>
<td>8</td>
</tr>
<tr>
<td>Cereal</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
jac*_*ers 27
table {
border-spacing: 0;
border-collapse: collapse;
}
Run Code Online (Sandbox Code Playgroud)
看看那些帮助你.大多数浏览器默认在单元格之间有一些填充(请记住ol'HTML属性cellspacing?).这将删除它.