在没有空格的HTML5中的表格边框 [英] Table row borders in HTML5 without gaps
问题描述
我想在HTML表格中有行分隔我的行，没有什么更多。很简单，对吧？
一些Googling将我带到表属性 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> Cookie< / td>
< td> 2< / td>
< / tr>
< tr>
< td>饼干< / td>
< td> 6< / td>
< / tr>
< tr>
< td> Milk< / td>
< td> 8< / td>
< / tr>
< tr>
< td> Cereal< / td>
< td> 2< / td>
< / tr>
< / table>
< / body>
< / html>
解决方案
border-spacing：0;
border-collapse：collapse;
}
看看有没有帮助。大多数浏览器默认在单元格之间有一点填充（记住ol的HTML属性
cellspacing？）。这将删除。This seems trivial enough, but I can't seem to stumble upon the answer.
I want to have lines separating my rows in an HTML table, and nothing more. Simple enough, right?
Some Googling brought me upon the table attribute
rules, but apparently this isn't supported in HTML5.So I searched deeper into CSS and realized I could put borders around the
tr's, right? Well no, not only does that not work but many SO threads | assured me its a bad idea.Logically I played with their solutions, which involved different combinations of
tr { border-bottom ..., but I always end up with this tiny, obnoxious gap. What gap? There's about a pixel or two gap between the twotd's (where a line separating columns would be). This may not seem like a big deal, but it seems unnecessary and I can't stop noticing it. For whatever reason however, it doesn't appear in jsfiddle, so I suggest trying this in notepad and opening it in the browser.Am I making a silly mistake? Is it a typo? Just my computer? Any help would be greatly appreciated... I've been staring at this for too long.
Here's my test file that I've been mostly testing in Chrome and Android. It really needs to work in both, as this will also run in a Phonegap app that renders HTML5 in the phone browser.
<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>
解决方案table { border-spacing: 0; border-collapse: collapse; }See if those help you out. Most browsers default to having a bit of padding between cells (remember the ol' HTML attribute
cellspacing?). This will remove that.这篇关于在没有空格的HTML5中的表格边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
