I would like to know, if this is a bug. As you can see on jsfiddle, there is only top border instead of borders around all cells. Note that IE 9 draws borders as expected. Also note that if you move the content of <tfooter> in the <tbody>, Firefox starts drawing borders as IE.
HTML
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<span class="norecords">No records found.</span>
</td>
</tr>
</tfoot>
<tbody></tbody>
CSS
table {
background-color: #EFEFEF;
border: 1px solid #BCBCBC;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
border: 1px solid #BCBCBC;
}
Your problem is the tbody - if you remove this empty tag (or add a row to it) it will work :
http://jsfiddle.net/FyARs/3/
This works for all
<table border=0 cellspacing=0 cellpadding=0>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<span class="norecords">No records found.</span>
</td>
</tr>
</tfoot>
<tbody></tbody>
</table>
CSS
table {
background-color: #EFEFEF;
border: 1px solid #BCBCBC;
}
th, td {
padding: 10px;
}
th {
border: 1px solid #BCBCBC;
}
It because the different ways browsers dealing with collapse borders.
In firefox, an empty tbody without tr in it, it will be treated as no-border, the no-border edge will over the edge of nearly rows.
just remove unused tbody in your case, or put at least a pair of <tr></tr> in it.
Related
I would like to highlight a row (change the background color) when i hover over any cell excluding the first 3 cells on the row (button cells). I also need to exclude the first row from the grid as that is the header row. (Images show desired behavior)
I have tried using many different :hover css selectors. But i cant seem to find the combination that allows me to highlight the row when hovering over any cell except the first 3.
table tr:hover td {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
Thanks!!
The 4th, 5thth, and 6th
columns were all <th>, the cells that are in the <tbody> should be <td>, so that is corrected. Also, I added a <thead> to it as well and an extra <tr> to show that the highlight affects each <tr> separately.
In order to meet the following criteria:
no JavaScript
valid HTML and CSS only
the 4th, 5thth, and 6th <td> of any <tr> within the <tbody> should all be highlighted at once if any one of them is hovered over.
the 1st, 2nd, and 3rd <td> of any <tr> within the <tbody> should never trigger any effects when hovering over them.
A sub-table could be used to isolate the last 3 columns:
in the <tbody>, remove the last 2 <td> of each <tr>.
add colspan="3" to the last <td> of each <tr> within the <tbody>
add a <table> into each of those <td colspan="3">
add a <tr> into that <table>
add 3 <td> into that <tr>
Figure I - a sub-table
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
table {
table-layout: fixed;
border-collapse: collapse;
}
th {
width: 5%;
}
th:nth-of-type(4) {
width: 50%;
}
th:nth-of-type(5) {
width: 5%;
}
th:nth-of-type(6) {
width: 15%;
}
td {
border: 1px solid #000;
background: transparent;
text-align:center;
}
.col {
padding: 0;
border: 0;
outline: 1px solid #000;
outline-offset: 0;
}
.sub tr:hover td {
background: #fc0;
}
.sub {
table-layout: fixed;
border-collapse: collapse;
min-width: 100%;
padding: 0;
border: 0.5px solid #000;
}
.sub td {
padding: 5px;
border: 1px solid 0.5px;
text-align: left;
}
.sub td:first-of-type {
width: 70%;
border-left: 0;
}
.sub td:nth-of-type(2) {
width: 10%;
text-align: center;
}
.sub td:last-of-type {
width: 20%;
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
</tr>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Jill</td><td>37</td><td>Female</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
It is not fully possible without JS as CSS has no parent selector. A few browsers (Safari and Chrome Desktop) already included the :has()-selector but as said, it is not fully supported yet.
The closest thing you an do without scripting is to highlight all th in a row. That said, you can use the tr:hover selector to check for a hover on the entire row. This means the hover will also trigger if you hover the first 3 elements. The background-highlighting therefore will only be used on the th. To exclude the first row you can use the :not()-selector:
table tr:not(:nth-child(1)):hover th {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
My HTML:
<table style="width:100%">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
My CSS:
table, th, td {
margin-top:150px;
margin-bottom:150px;
border:1px solid black;
}
th, td {
padding:15px;
}
th {
text-align:left;
border-collapse:collapse;
}
I want to collapse the borders of the TH only, but it's not working. Border collapse and border spacing aren't working when i target only the TH. I can change the background color and the padding and do other changes to TH only, but border changes seems to not work. Why is that?
Note: Before you tell me how it can be done using other ways, please tell me why THIS way isn't working.
Because border-collapse is a style rule of the table and not of the single cells (td or th). This means that you set it on the table element and all the borders in the table will collapse or separate.
You can mimic the behavior of border-collapse: separate only in td by doing something "hacky" like inserting a div inside tds. Check out the fiddle below:
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
}
td {
padding: 2px;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
td > div {
height: 100%;
width: 100%;
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>Cell 1</div></td>
<td><div>cell 2</div></td>
</tr>
<tr>
<td><div>Cell 3</div></td>
<td><div>Cell 4</div></td>
</tr>
</tbody>
</table>
as everybody told you , border-collapse is a rule set for the whole table, it tells how cells should be printed at screen side by sides.
A work around could be to fake borders with a box-shadow.
inside tds :
table {
border-collapse: collapse;
}
th {
border: solid 2px;
box-shadow: inset 0 -2px;
}
td {
border: solid transparent;
box-shadow: inset 0 0 0 2px;
padding:3px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
outside th
thead {
padding-bottom: 2px;
}
th {
border: 0;
box-shadow: 0 -2px, inset 0 -2px, 2px 0, -2px 0, 2px -2px, -2px -2px;
padding: 2px;
}
td {
border: solid 2px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
The border-collapse property can only be applied to <table> elements - not individual rows or cells
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
I am using a table to display data .I am trying to remove space from the left and right of th and td element.
I have tried checking on stack overflow and other places but they all remove vertical spaces between cells. What i want to remove is remove space from left and right.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
This is what i get
table
The red circle is what i want to remove.
The CSS causing the padding is not included in your example. Run this snippet and look at the output. Other CSS you are importing is causing the table width.
In Chrome, right click on one of the table cells and go inspect. Look at the styles in the devtools to see where it is coming from.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
If you use Firefox, use the Inspector. This way you can see which css attribute influences the table elements. For other browsers there should be similar possibilities.
See e.g. for Chrome, Edge
Sorry about the problem you are experiencing but I cant see it from my end. I wrote a new html file and copied your contents without any edits into it like you can see below but the issue was not detected. You too can try out and see for yourself.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
Possible reasons include:
browser issue (try to use a different browser, clear history on your browser)
you never saved your edits
your css has table attribute already added to it at the top making browser inherit them hence ignoring those for #contact_search
You could try out this for yourself in your css by the way
#contact_search{
border-collapse: collapse!important;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006!important;
line-height: 1!important;
}
please note the keyword !important for css for overriding attributes.
The only solution I have found is to fill in the table with empty table cells (Shown in ROW1 and ROW7)
ROW3 through ROW6 contain only a single table cell which does not span the full table width. I've tried a fixed layout table and everything I can think of on the table-row to get it to fill in to 100% width without luck.
The reason I need the row to be full width is so that I can show top and bottom borders on the row, spanning the full width of the table.
I'm working on updating software for a client and must use tables and must find a solution that is compatible in Internet Explorer 10 minimum.
All table related elements use their natural display types, table, table-row, and table-cell
The rows are generated programmatically and colspan is a problematic solution.
Thank you for reading.
You cannot apply a border on table rows, but you can apply an outline:
tr {
outline: 1px solid black;
}
Example 1:
table {
border: 1px solid black;
border-spacing: 0;
empty-cells: show;
}
td, th {
padding: 0.5em;
border-right: 1px solid #ddd;
}
tr {
outline: 1px solid black;
}
<table>
<tr><th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
</tr>
<tr><td>Row1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><td>Row2</td>
</tr>
<tr><td>Row3</td>
</tr>
</table>
As you pointed out in the comments, an outline surrounds the entire element.
To have a single border at the bottom of the row, put it on a pseudo-element:
table {
position: relative; /* pseudo-element will be based on the table's position */
overflow: hidden; /* don't let the pseudo-element overflow the table */
}
tr:before {
content: ''; /* required for rendering */
position: absolute; /* absolute positioned */
width: 100%; /* span the entire table */
border-bottom: 1px solid black; /* the magic border */
}
Example 2:
table {
border: 1px solid black;
border-spacing: 0;
empty-cells: show;
}
td, th {
padding: 0.5em;
border-right: 1px solid #ddd;
}
table {
position: relative; /* the pseudo-element will be based on the table */
overflow: hidden; /* don't let the pseudo-element overflow */
}
tr:before {
content: ''; /* required for rendering */
position: absolute; /* absolute positioned */
width: 100%; /* span the entire table */
border-bottom: 1px solid black; /* the magic border */
}
<table>
<tr><th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
</tr>
<tr><td>Row1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><td>Row2</td>
</tr>
<tr><td>Row3</td>
</tr>
</table>
Apply colspan on the cell:
<table border="1">
<tr>
<td>oi</td>
<td>oi</td>
<td>oi</td>
<td>oi</td>
<td>oi</td>
</tr>
<tr>
<td colspan="5">oi</td>
</tr>
<tr>
<td>oi</td>
<td>oi</td>
<td>oi</td>
<td>oi</td>
<td>oi</td>
</tr>
</table>
As the title says my table border is being cut off on my table when using overflow: hidden. Please see code below for example.
<style>
table {
border-collapse: collapse;
}
table {
border: 1px solid black;
overflow: hidden;
}
</style>
<body>
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>side header</th>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>footer header</th>
<td>footer 2</td>
<td>footer 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
I have simplified my example down the the bare minimum. I could lose the border-collapse style which would correct this, but I need that style. My code becomes to messy without it.
As an interim solution I have found that I can hack it using the css below, but I am not a hug fan of hacks!
.borderhack:after {
content: '\00a0';
position: absolute;
border: 1px solid black;
left: -2px;
top: -2px;
width: 100%;
height: 100%;
z-index: -10;
}
table {
position: relative;
}
I would appreciate any explanations or better solutions to this. I am really interested to know why it's actually doing this after a days worth of investigation.
Thanks
There are two quick solutions:
Use 2px border width.
Use outline instead of border.
Eg:
table {
border-collapse: collapse;
border: 2px solid black;
overflow: hidden;
}
or
table {
border-collapse: collapse;
outline: 1px solid black;
overflow: hidden;
}
http://jsfiddle.net/6NVtS/1/
The why of it happening, I think, is that when using the collapsed border model of table borders the browser is trying to split the border in the center. On a one-pixel outside border obviously that's not possible, so the browser is using a full pixel width if top/left, and nothing if bottom/right. This behavior might be somewhere in the standards, I didn't look that far. But inside this will correctly fill out the borders without doubling up width, it's just the combination of the outside and overflow:hidden that's presumably cropping the bottom and right, which the browser generates but are technically nudged a half-pixel to the right and thus are 'outside' the region of the element. I hope that makes sense. Outline is not cropped by the overflow - I'm not sure why, I wouldn't have predicted an exception.
http://www.w3.org/TR/CSS21/tables.html#collapsing-borders
Another solution might be to apply overflow to td and th instead of table, or check if you really need to set overflow at all.
What's the point in using border-collapse if there are no borders to collapse? Remove the border-collapse and you'll be fine.
See working example here: http://jsfiddle.net/86xST/
Thanks to skrivener and some further investigation I have managed to figure this out. See the solution here.
Problem - border collapsing not equal around table border:
.table1 {
border : 3px solid black;
overflow : hidden;
border-collapse : collapse;
}
Solution - must not declare border width in border must do it using border-width:
.table2 {
border : solid black;
overflow : hidden;
border-collapse : collapse;
border-width : 6px 7px 7px 6px;
}
th {
border: 1px solid black;
}
th {
border: 1px solid black;
}
Problem:
<table class="table1">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>side header</th>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>footer header</th>
<td>footer 2</td>
<td>footer 3</td>
</tr>
</tfoot>
</table>
Solution:
<table class="table2">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>side header</th>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>footer header</th>
<td>footer 2</td>
<td>footer 3</td>
</tr>
</tfoot>
</table>
Skrivener:
"The why of it happening, I think, is that when using the collapsed
border model of table borders the browser is trying to split the
border in the center. On a one-pixel outside border obviously that's
not possible, so the browser is using a full pixel width if top/left,
and nothing if bottom/right."
This let me to believe that perhaps if I just set the 4 borders setting border-width manually and added 1px to the right and the bottom, the rounding would work correctly. See the solution and you can update the borders to see it works correctly. Now no matter what you can have equal width outer borders as long as you add 1px to the right and bottom borders.
Thanks again for all the help!
Try following
1. give margin to your table
2. User table-layout: fixed
3. set