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
What I'm trying to do
I'm trying to implement a table header with a border and drop shadow, and have it include padding on the table head.
What I've tried
I gave the div that wraps the table a padding of .75em and when I added a drop-shadow and border to the thead, it did not go around the padding (expected). It did produce the effect I was going for, just there is still padding around the thead that I would like to be included with this effect.
Next I tried moving the .75em padding to the thead and tbody, but it is not working as intended. Inspecting says padding has no effect on internal table elements except cells.
Next I tried to wrap the content inside the thead in a div and give that a padding of .75em, but that did not work.
Next I tried to wrap the content outside the thead in a div and give that a padding of .75em, but that did not work either.
My DOM looks like this
<div class='spreadsheet'>
<table class='data'>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
What I'm trying to achieve:
Not sure to understand what you want, but is it working for you?
.spreadsheet{
background:lightblue;
padding:0.75em;
}
table {
border-radius: 5px;
box-shadow: 2px 2px 5px lightgray;
border-spacing: 0;
background:white;
}
th {
padding: 20px;
}
thead {
border-radius: 5px;
box-shadow: 2px 2px 5px lightgray;
}
tbody {
margin-top: 50px;
padding-top: 20px;
}
As a temporary solution I've added blank rows and columns to each side and gave them a height and width respectively of the padding size. This causes problems with hovering and makes things more complicated than they probably need to be.
I'm using Handlebars.js, requiring data from a JSON file, meaning that this table must be dynamic.
I've already configured the table to display the JSON file properly, however, I'm having some CSS issues as I'm not being able to align the headers with the rows. I've reproduced the issue on a small environment in this Code Pen (http://codepen.io/OPaiTaCa/pen/rjowYm)
I believe that this can be fixed by arranging the CSS file
table.content {
width: auto;
border: 1px solid black;
}
th {
border: 2px solid black;
display: inline;
}
tbody tr {
float: left;
}
tbody td {
display: block;
border: 1px solid black;
}
Any help would be appreciated.
display: inline and display: block both remove the default table-cell property from th and tr which is essential for table layout. Erase both, and also erase float: left - it is meaningless in this context.
ADDITION: I hadn't looked at your codepen first: Your number of thcells is different from your number of tdper row. It either has to be the same number/amount of cells in every row (including the header) or you have to use rowspan attrubutes for cells that should span several rows.
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
I'm currently working on a table that has a different link for each row. The-clicking-area must fill the whole table-row.
And please: No Javascript! And if possible no additional Div-elements.
This is what I got so far:
http://jsfiddle.net/WLYW3/
this works pretty good, but there are some problems:
After adding height: 128px; to the a-elements (which seemed necessary), the text in each row wasn't vertically centered anymore. Adding vertical-align: middle; didn't help.
And I can't get the table to have rounded corners. (border-radius: 6px 6px 6px 6px;).
To fix it, simply add this :
#itemTable tbody tr td a
{
line-height: 128px;
}
Vertical alignment
Because you use the <table> elements, you can just make the anchor 100% height. Combined with vertical-align: middle;, which is used on the <tbody> by default, it will calculate the middle based on the total height (100%):
#itemTable tbody tr td a {
display: block;
position: relative;
/*height: 128px;*/
height: 100%;
text-decoration: none;
color: rgb(51, 51, 51);
}
Table radius
A table without a border actually does not support the border-radius property and there is no clean solution, you can only force it.
However, even though you did not want an extra element, a wrapper would be the most clean solution:
#tableWrapper
{
border-radius: 5px;
overflow: hidden;
}
jsFiddle
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.