I've been struggling with this issue for months now and even Google hasn't been able to provide a solution. My problem is that I want to add spacing between <td> and <th> tags in a table, but whenever I do, the spacing appears on the outside which causes the table to not align properly with other elements. It almost looks like the table has some extra padding.
No matter how hard I try, I can't seem to find a fix for this.
Check out this example to see the issue in action.
I was able to enhance the solution by implementing a transparent border, eliminating any obliquely cut inner borders.
1) Allow the table to fill horizontally and collapse its borders:
table {
width: 100%;
border-collapse: collapse;
}
2) Ensure all table cell borders have a width of 0 and prevent the background from being drawn below the border.
td {
border: 0px solid transparent;
background-clip: padding-box;
}
3) Add inner space with a transparent border omitting the first row and column.
tr > td + td {
border-left-width: 10px;
}
tr + tr > td {
border-top-width: 10px;
}
Check out the jsbin for reference.
Encountered a similar issue, where the border spacing property was creating unwanted space around the entire table. Unable to find a way to restrict it to the inner part only, I resorted to using transparent borders instead:
table td {
border-left: 1em solid transparent;
border-top: 1em solid transparent;
}
Although this maintains the 'border-spacing' effect, it eliminates any unnecessary spacing at the top and left sides of the table.
table td:first-child {
border-left: 0;
}
This targets the first column specifically.
table tr:first-child td {
border-top: 0;
}
Applies to the td elements within the initial row (if the table starts with a tr element on top, adjust as necessary for th).
I came up with a new technique using negative margins that builds upon Steven's suggestion. This method allows you to ensure the table takes up 100% of the width, even if it doesn't have enough content. To achieve this, set the table width to 100% and apply a negative margin to a parent element:
#container {
margin: 0 -10px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
td, th {
background-color: #ccf;
padding: 5px;
}
Following Steven Vachon's advice, negative margin might be the most effective solution.
Another option is to utilize the calc() function to address the issue.
CSS:
/* border-collapse and border-spacing serve as css counterparts for <table cellspacing="5"> */
.boxmp {
width:100%;
border-collapse:separate;
border-spacing:5px 0;
}
/* border-spacing includes the left of the first cell and the right of the last cell
apply negative margin on the left/right and incorporate those negative margins into the width
-webkit- is necessary for ios6 compatibility
calc() is not supported in android browser
100.57% is the widest I could achieve without a horizontal scrollbar at 1920px wide */
.boxdual {
margin:0 -5px;
width:100.57%;
width:-webkit-calc(100% + 10px);
width:calc(100% + 10px);
}
Remember to include the same margin you remove or the width will be too narrow (100% won't suffice).
table {
border-collapse: separate;
border-spacing: 15px;
width: calc(100% + 30px);
margin-left: -15px;
}
Implement margin-left: -15px; to eliminate left padding while having 30px of padding on the right side. To make further adjustments, utilize width: calc(100% + 30px);
To achieve a desired layout, utilize negative margins along with a container that has positive padding.
#container {
box-sizing: border-box; /* Prevents exceeding 100% width */
margin: 0 auto;
max-width: 1024px;
padding: 0 10px; /* Adjusts for table overflow */
width: 100%;
}
table {
border-collapse: separate;
border-spacing: 10px;
margin: 0 -10px; /* Removes external border spacing */
min-width: 100%; /* Ensures content fills the space */
}
td {
width: 25%; /* Maintains uniformity */
}
Ensure your content is sufficient to stretch the table to its full 100% width, otherwise it may end up being slightly narrower by 20px.
For more details, visit: svachon.com/blog/inside-only-css-table-border-spacing/.
I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...
Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...
My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...
I've encountered an issue with MUI 5.14.1 where I'm getting an error every time I attempt to save themes across pages using localStorage. Any suggestions on how to resolve this problem or recommendations on a different approach would be greatly a ...
Is there a difference in SEO impact between using display:none with CSS and using display:none with jQuery for menus? Appreciate the insights! ...
I am struggling with setting up a dropdown submenu on my website that uses a responsive Joomla template. The submenu always appears behind the main menu and slider, despite trying z-index and relative positioning. Can anyone help me figure out what I' ...
I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...
On my website, I have implemented automatic hyphenation using CSS: article > p, article > li { -o-hyphens: auto; -o-hyphenate-limit-before: 3; -o-hyphenate-limit-after: 3; -o-hyphenate-limit-chars: 6 3 3; -o-hyphenate-limit-lines: 2; -o-h ...
I'm having an issue with my webpage where it doesn't scroll even when the content exceeds the page length. I've tried adjusting the position settings for the body, html, and div elements but haven't seen any changes. Here is the HTML ...
I've successfully implemented a customized dropcap for my Wordpress blog posts using CSS. Is there a way to limit this effect to just the first paragraph, leaving subsequent paragraphs unaffected? Any guidance on achieving this would be highly apprec ...
Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated. Models.py from __future__ i ...
Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...
I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...
In my Angular 8 app, I am developing a basic carousel without relying on external libraries like jQuery or NgB. Instead, I opted to use pure JS for the task. However, the code seems quite cumbersome and I believe there must be a more efficient way to achie ...
I'm currently in the process of building a website that utilizes the jquery tabs api. Each tab on the site contains an image that I would like to resize dynamically as the browser window size changes. Here is an example of one of the tabs: <li st ...
I am dealing with a grid layout where cells are dynamically generated using the following code: <style> .calWrapper{ width:200px; float:left; } </style> <div class="container"> <?php for($i=1; $i<=12; $i++){ echo ...
How can I ensure that the labels in both canvas and HTML display overlap exactly, regardless of font family and size? The current code fails to center text inside an area when switching between canvas and HTML view. let canvas = document.getElementById( ...
I am struggling with my dropdown menu and sign up/sign in buttons as they are not aligning properly. I have tried various coding methods but haven't been able to fix the issue. Can someone provide me with suggestions on how to rectify this problem? c ...
While attempting to insert an image inside a textarea, I discovered that it seems impossible without using the contenteditable ="true" attribute of a textarea. However, upon visiting the diaspora site, I found out that this can indeed be achieved. I am uns ...
There seems to be some random white space on my website between the main body elements and the footer. Interestingly, removing the cat image and videoplayer eliminates this white space. However, I don't want to remove them completely, so I'm tryi ...