Removing Table Lines and Table Space Between Cells in CSS

How to remove unwanted space between rows and columns in table?

Add this CSS reset to your CSS code: (From here)

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

It'll reset the CSS effectively, getting rid of the padding and margins.

Remove spacing between table cells and rows

It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.

Removing table lines and table space between cells in css

table#myTable{
border-collapse:collapse;
}

Removing spacing between HTML table rows and columns

cellspacing:0px;

Remove this. There used to be an HTML attribute named cellspacing, but it was obsoleted by CSS two decades ago.

cell-padding:0px;

The property is called 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).

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>

How to remove spaces between cells in a html table

The browsers are not telling you that your border-spacing style is overridden by the user agent style sheet. Instead, they may indicate that inheritance does not take place for it. This is simply caused by the fact that some style sheet sets the property on the element.

The reason why your rule is not applied to the inner table element is that it does not match any of your selectors. The selector

table.tableGroup > tr > td > table

does not match it, because a tr element is never a child of table even if might appear to be. By HTML syntax, there is an intervening tbody element, even if its start and end tag are missing. The following selector would match:

table.tableGroup > tbody > tr > td > table

Of course, a mere table selector would do the job as well, provided that you want all table elements to be styled by the rule.

Space between td . Why and how can I remove?

Use cellspacing and cellpadding :

 <table cellspacing="0" cellpadding="0">

</table>

How to remove space between lines in the table?

Put

border-collapse: collapse

on table tag

Remove spacing between table rows in HTML email

Since display:block wasn't a solution, I tried removing the <!doctype html> declaration and that fixed the issue. Normally I don't think this would be acceptable, but to the best of my knowledge - and after testing - it does not have any negative impact for HTML email.

Can't remove cell spacing between cells in table html css

When I copy exactly what you have for css and html, I don't see the white lines. BUT... I think it may have something to do with the last style you have in the table stylesheet.

th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
/* box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); */
}

What happens if you change the background color to a bright color like red or orange? Do the grid line colors change?

EDIT:

I looked at the link you provided. I was able to see the issue in Safari but only when I zoom. I believe it is rendering issue caused by position: absolute and perhaps the transform on <div class="schedule_holder">
Updating the styles for that element worked for me.

.schedule_holder {
overflow: auto;
height: 70%;
margin-top: 4%;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}


Related Topics



Leave a reply



Submit