Menu
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>
560
This is a Default behavior of the table cells that there is some space between their Borders. To remove this space we can use the CSS border-collapsing Property. This Property is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not.
To add a border to your table, you need to define the <style> of your table. Remember to add borders also for <th> and <td> tags to have a complete table. Set the border-collapse property as well (if you don't define the border-collapse, it will use border-collapse: separate by default).
To make an invisible border, set the BORDER attribute to 0. (Although most browsers default to a table border of 0, specifically stating it ensures that the border will be invisible in all browsers.)
In traditional HTML coding you remove the spacing within a cell by setting the “cellspacing” attribute to zero.
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.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
