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
Fluid Container in Bootstrap 3
Angular Material Side Bar with "Half" Side Mode
How to Specify Font Attributes for All Elements on an HTML Web Page
Image Stretching in Flexbox in Safari
Set Textfield Height Material-Ui
Hide All Elements Except One Div for Print View
CSS - Opaque Text on Low Opacity Div
Different Behavior of Flexbox with (Overflow-Y) Scroll on Safari, Firefox and Edge VS Chrome
Cross-Browser Support of 'Page-Break-Inside: Avoid;'
Sidemenu Background-Color in Ionic-V4
Forward Slash/In CSS Border Radius Syntax
Confused by CSS Pseudo-Class :Active