I was trying to put some horizontal spacing between the table cells here:
http://jsfiddle.net/mVX93/43/
However the only thing I was able to do to get it to appear correctly was to put a thick border the same colour of the background a bit like this:
border: 10px solid gray;
Is there not a better way to put spacing between the cells?
Change your code to this:
#my-table td{
padding-left: 10px;
padding-right: 10px;
vertical-align: top;
background-color: white;
}
Remove this line
border-collapse: collapse;
to see your space between cells better
Related
I have a table in which I would like the borders to collapse and all the cells to touch. I feel like I may be missing something obvious, but the bottom borders are not showing at all despite having height assigned to them. They instead just separate the cells from one another allowing the background color to show through (red in the example).
If I change the border-collapse to separate the borders re-appear, but the gaps remain as well as adding gaps between the columns as well.
JSfiddle
You are not targeting the Table Row, see fiddle: https://jsfiddle.net/32o87x7L/3/
.defaultTable tr{border-bottom: 2px solid blue;}
.defaultTable th,
.defaultTable td {
position: relative;
display: table-cell;
vertical-align: top;
padding: 9px 16px;
font-size: 14px;
line-height: 20px;
background: #eee;
border: none;
//border-bottom: 2px solid blue;
box-sizing: border-box;
}
As is usually the case, I solved my own problem right after submitting my question. :-/
Apparently table-cells do not take too well to positioning as they cannot be consistently. Removing position: relative; from the .defaultTable th, .defaultTable td did the trick.
Related Question
The above question is similar. But I wanted to know if the right borders can be made continuous?
How do I get the gaps between the vertical lines to disappear and make it look like a continuous line?
Also, I have to use inline CSS styling. Can't work with external CSS or style tags within head either.
You can achieve that by doing this
table {
border: none;
border-collapse: collapse;
}
td {
border: none;
border-right: solid 1px #333;
padding: 10px;
}
tr td:last-of-type {
border: none;
}
Click to see working example
Example: http://jsfiddle.net/WaJy7/
I'm trying to add a semi-transparent bottom border to each of my <tr> tags, but the border color is darker than it should be for all but the bottom row and I can't figure out why.
Can you explain why this happens and how to fix it?
I'm not interested in solutions that involve using non-transparent colors.
It appears to be a rendering bug with border-collapse. Tables are fun!
Anyway, I removed border-collapse: collapse and moved your border styles to the table cells themselves. It's happier now.
http://jsfiddle.net/WaJy7/2/
table{
border-spacing: 0; // Equivalent of cell-spacing: 0 on table
width: 300px;
margin: 30px;
}
table tbody td{
border-bottom: 10px solid rgba(0,0,0,0.5);
}
table tbody tr td{
text-align: center;
padding: 15px;
}
I am trying to figure out how to add border only inside the table with the cell spacing. When I do:
table {
border-collapse: collapse;
border-spacing: 4px;
}
table td, table th {
border: 1px solid black;
}
It works almost fine just cells without spacing. How to achieve that?
Thanks
If you're trying to write CSS rules for tables on which you've defined the cellspacing attribute, a solution could be this :
table[cellspacing] {
border-collapse: collapse;
border-spacing: 4px;
}
table[cellspacing] td, table[cellspacing] th {
border: 1px solid black;
}
But it would be much cleaner and more efficient to give a class to your table (<table class="withspace">). So you would more classically do
table.withspace {
border-collapse: collapse;
border-spacing: 4px;
}
table.withspace td, table.withspace th {
border: 1px solid black;
}
EDIT : just in case, if what you want is simply to have some space in your cells, add a padding value in your css :
table {
border-collapse: collapse;
border-spacing: 4px;
}
table td, table th {
border: 1px solid black;
padding: 4px;
}
The CSS code posted is correct and causes borders around cells (but around the table as a whole) and 4px spacing between cells, on conforming browsers. I suppose you were testing this on IE 7 or older, which do not support the border-spacing property.
I’m afraid there is no simpler workaround than to create a table without any borders and put an inner element inside each cell, making that cell occupy the entire cell except small margins, and draw borders around the inner elements. This probably gets ugly, so I’d rather let the presentation on IE 7 be suboptimal.
(For some reason, border-spacing does not seem to work in jsfiddle. Probably some general rule overrides a normal attempt to set the property.)
I have some tables which render fine in IE and Chrome. But in Firefox some of the border arbitrarily don't show or have different widths. You can see an example Here. Below is the relevant css:
table {
font-size: 1.0em;
border-collapse: collapse;
border: 3px solid #004C87;
margin: 5px 5px 5px 5px;
}
th, td {
padding-top: 7px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #004C87;
text-align: left;
vertical-align: top;
line-height: 1.3em;
}
In the image below I took screen shots as it renders in the different browsers. The black arrow depicts the situation where the line/border does not show. The red arrow illustrates situation where the width is different.
If I were to repeat these tables the occurrences would be arbitrary.
I had an issue where borders were appearing when they shouldn't have been.
I resolved it with this:
border-collapse:separate;
I know it's not the direct answer, but the search brought me here.
I'm posting this as the answer as I'm convinced at this point you must be just a little zoomed out in Firefox. Try pressing Ctrl+0
If you compare the two tables in the image you provided, you can see that the bottom one is slightly larger than the top one.