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 two td'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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
