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/.
Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when cli ...
This problem has been puzzling me for quite some time now, and I just can't seem to find the solution! Kindly disregard the other language and code - the card is located under the jumbotron. (To access the link, remove spaces: https://code pen.io/ano ...
Hey there, I'm currently facing an issue with a menu I created that slides open to the bottom when a button is clicked. The problem I'm encountering is that the content of my menu only appears about half of the time... I'm not quite sure how ...
Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...
I need help figuring out how to make two separate buttons work. One button should display 'Div 1' and hide 'Div 2', while the other button should show 'Div 2' and hide 'Div 1' when clicked. My knowledge of jquery an ...
I have incorporated a sample code into this html/css document that utilizes a script to generate a 3D cube using three.js. Upon opening the HTML file, I am presented with a blank page in chrome displaying only, "canvas { width: 100%; height: 100% }" Belo ...
Upon clicking the start button, the score button, as well as the try again or correct button, are not being updated. Can someone help me figure out what's wrong? I believe the issue lies within this section of the code: for (i=0; i<5; i++) { do ...
In the process of creating a responsive navbar with Bootstrap, I encountered an issue. When resizing the window to a smaller size, the collapse icon shifts from the top right position below my "logo". Here is how the site appears on a regular screen: http ...
Looking to decrease the font size of the latest post's title and keep it centered on my Jekyll based blog. I attempted to adjust https://github.com/x0v/x0v.github.io/blob/master/_sass/atoms/_feature-title.scss by adding font-size: 45px !important; f ...
As a newcomer to the world of javascript, I acknowledge that my approach may not be ideal... I'm attempting to modify the color of a material icon upon clicking it. Essentially, I want to toggle it on and off. The challenge lies in the code's in ...
I'm currently facing a challenge with my HTML code on my website. I have 5 tabs already set up, but I want to add one that redirects users to a printable page that opens the print menu specific to their browser. It seems like there might be an issue i ...
Update In my CSS file, I encountered a conflict with the following snippets. When I include this section: <style type="text/css"> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ background-color: #E13300; colo ...
Having trouble with invalid selector errors when attempting to locate an element using capybara This method is successful: page.find("#widget_amount_Standard") But I encounter issues when trying any of the following: credit_type = "Standard" page.find( ...
I am using this as an opportunity to learn, so I appreciate if you can refrain from telling me what not to do and instead help me understand the concepts. What I am trying to achieve here is comprehension. Here is a sample of CSS code: input[type="file"] ...
Hey everyone, I've got a Mega Menu below for you to check out! <div id="menu-wrapper"> <ul class="nav"> <li><a href='#'>Brands</a> <div> <div class="nav-colu ...
GOAL: I want to freeze the header, freeze the first column, and be able to collapse rows multiple times. CURRENT PROGRESS: I have achieved freezing the header, first column, but can only collapse rows once. MY CODE SNIPPET: </head> <body> &l ...
I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">+</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...
I have scoured the forum and came across several older threads that suggest it is not achievable with just CSS (the system I am utilizing does not support scripts). Is there a possibility that this has changed or if someone else has an alternative idea? W ...
Check out my website at . Everything looks great in Firefox, but when I view it in IE, the "top" button that should be floated inside the h2 titled "Unit 301: Pre-production skills" is floating to the right and getting pushed outside of the heading. Any i ...
Currently, I am working on creating a responsive text section with a grid-like horizontal line resembling paper, and the challenge lies in aligning the text properly within this grid. While I can achieve this when the font size remains constant, I am curi ...