I have a table with data and when I view it in Firefox some of the borders are not showing. Please see screenshot attached.
This does not happen in any other browsers. Tested in Firefox, IE, Safari and Chrome.
Any idea why and hot to fix it?
I use styles to format the table:
.myTbl {
border: 2px solid #cccccc;
border-collapse: collapse;
}
.myTbl th, .myTbl td {
white-space: nowrap;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 2px;
}
.myTbl td {
text-align: center;
width: 15%;
}
.myTbl tr:hover td {
background-color: #ffffcc;
}
.myTbl thead th, .myTbl thead:hover th {
text-align: center;
font: normal 10px arial, verdana, sans-serif;
background-color: #ffffff;
}
HTML:
<table class="myTbl">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Border-Collapse:Collapse - Borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored)
Border-Collapse:Seperate - Borders are detached (border-spacing and empty-cells properties will not be ignored). This is default
This link might be helpful for you to understand border-collapse:collapse and seperate and to understand how it works.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
I also experienced this border-collapse issue in ff - where most cells within a table show borders but the occasional cell shows no border - which looks odd. I tried santa's suggested work-around and it does work - by using border-collapse: separate; and setting border-spacing to 0 it reduces the separated border spacing to zero, giving the 'appearance' of a collapsed border (in other words, what border-collapse: collapse; was suppose to do in ff).
For what it's worth the following seem to have solved my issue. I replaced:
border-collapse: collapse;
with
border-collapse: separate;
border-spacing: 0;
Related
I am having trouble figuring out what I'm doing wrong... I'm trying to do something that should be simple--change the border color of an entire row when the user hovers over the row.
For the table, I'm using the following CSS code:
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
.sch tr:hover{ border-color: red; }
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
The issue is that, when you hover over the second or third row, the top bar of the border remains black, while the sides and bottom change to red. Only the top row changes to red all the way around.
I suspect that this has to do with the bottom of the previous row somehow covering up the red of the hover, but I've tried about everything--except the right answer---to fix it.
Thanks for your help!
border-collapse: collapse; is a culprit here.
It is related to the fact that the top cell bottom border is on top of the bottom cell top border. If you make top cell bottom border as none then you will see all borders properly being set to red.
Look at this interactive example in MDN to see exactly what happens
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
This appears to be tricky to implement without JavaScript.
This is a solution using jQuery:
$(".sch tr").hover(function(){
$(this).css("border-color", "red");
$(this).prev().css("border-bottom-width", "0");
}, function(){
$(this).css("border-color", "#000000");
$(this).prev().css("border-bottom-width", "2px");
});
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
If you want to use CSS and HTML only, you can use such not the best but working solution.
CSS-file:
.sch {
width:97%;
margin: 0 auto;
margin-top:30px;
border-collapse: collapse;
}
tr {
border: 2px solid #000000;
}
.sch tr:hover {
border-color: red;
border-bottom-width: 2px;
}
tr:nth-child(3) {
border-bottom-width: 0;
}
tr:nth-last-child(1) {
border-bottom-width: 2px;
}
HTML-file:
<table class='sch'>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
</table>
I have a table wherein I need to put a border around a given row or rows with spacing between them.
I seem to be able to do one or the other.
I know I can use
table { border-collapse: separate; border-spacing: 1em 0.5em; }
To get my spacing, but then the border won't show up with something like
tr.bordered { border: 1px solid blue; }
If I set border-collapse: collapse, the blue border shows. But then no spacing.
Am I missing something here?
EDIT: JS FIDDLE here
You can see, if you use "collapse", the border works but there is no space.
If you use "separate" you get spacing but no border.
Duplicate question here: Style row or column rather than cells when border-collapse: separate
The recommendation is to use colspan to simulate a table row, and add a border to the table inside of the colspan.
I guess what you want is to put spaces between the borders of the cell and its data? If so, you can use the property padding in td. ex:
td {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
}
You can have an inner table which is bordered:
<table>
<tr><td colspan="3">
<table class="bordered">
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
</table>
</td></tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td>dolor</td>
</tr>
</table>
Demo: http://jsfiddle.net/2nMcg/7/
If you want spacing between the table rows and add a border style to each row you can achieve this by setting only top and bottom border-spacing otherwise you cannot have a continuous line for each table row. And you need to set the border style on the td. Since border-collapse: collapse prevents to style the border on the TR element but you need it to set the top and bottom spacing between rows.
http://jsfiddle.net/6rLsL/1/
http://jsfiddle.net/6rLsL/1/show
table {
border-collapse: separate;
border-spacing: 0 0.5em;
}
td {
padding: 0.5em;
border-top: 1px solid #000;
}
you can try to draw an unblured shadow : DEMO
.bordered {
box-shadow:0 0 0 1px black;
}
:( this works in FF , but ...
so ,
we can use :first-child and :last-child to draw borders from tds,
DEMO 2
.bordered td {
border: 1px solid #000;
border-left:none;
border:right:none;
padding:1em 0.5em;
border-right:none;
}
.bordered td:first-child {
border-left:1px solid #000
}
.bordered td:last-child {
border-right:1px solid #000;
border-left:none;
}
table {
border-spacing: 0;
}
I am having an issue with a table border not displaying correctly. Below is a fiddle recreating the issue.
This Fiddle produces expected results in FF and Chrome but not in IE9 and IE10.
Only css that is being applied is a border-collapse: collapse and
td{
border:1px solid;
}
The second table row should have a border along the entire bottom however the border is missing on the second table cell. Can be seen in this image.
This issue disappears once part of the table is highlighted but the expected result is that the border should be there in the first place. Sometimes the fiddle must be updated for the issue to appear.
Is this a known IE issue or is there more styling that must be applied?
I had a similar problem and your solution above worked for me with a slight change. (I used primefaces)
Following code worked
.ui-datatable tbody>tr>td {
border-top: 1.1px solid;
}
Following code didn't work
.ui-datatable tbody>tr>td {
border-top: 1px solid;
}
Best solution that I could find:
table{border-top:1px solid #000;}
tr{border-left:1px solid #000;border-bottom:1px solid #000;}
td{border-right:1px solid #000;}
Example here
Checked in both IE9 and IE10
Since this is caused by border-collapse: collapse it can also be solved by placing the borders in the correct places manually and using border-collapse: separate.
table {
border-collapse: separate;
border-spacing: 0;
}
td {
border-bottom:1px solid;
border-right:1px solid;
}
tr > td:first-child {
border-left: 1px solid;
}
table tr:first-child td {
border-top: 1px solid;
}
This doesn't work in IE7 and below because they don't support neither border-spacing nor :first-child.
For me this worked:
<table cellspacing="0" and cellpadding="0"> ... </table>
I found using position: static; on the th/td works well.
table {
border-collapse: collapse;
border: none;
}
tr {
border: none;
}
th, td {
position: static;
border: 1px solid #000;
}
I have a very basic table:
<table id="ttable5" class="table-default">
<thead>
<tr>
<th>Nombre</th>
<th class="sort-date">Provincia</th>
<th class="sort-digit">Municipio</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tablaprim">1VESTIBULUM TORTOR NISL </td>
<td>Sevilla</td>
<td>Castilleja de la Cuesta</td>
</tr>
<tr>
<td class="tablaprim">4VESTIBULUM TORTOR NISL </td>
<td>Sevilla</td>
<td>Castilleja de la Cuesta</td>
</tr>
</tbody>
</table>
I need to have this:
------------
head
------------1px border #fff
------------3px border #gray
body
------------
I can only get to show one of the borders, never two at the same time. It's not really important but I'm curious about what is causing this issue.
My css:
thead{border-bottom: 1px solid #fff;}
tbody{border-top: 3px solid #4d4d4d;}
EDIT:
Since it seems like the border-collapse might be the issue but I can't make it work I've set up this sandbox:
http://jsfiddle.net/bRVEu/
There you can see there's only a grey border, there should be a 1px white border right on top of it
In order for this to work, you need to
a) use both border-collapse and border-spacing
b) set the borders on the most interior elements of the table
c) you must set border-collapse and border-spacing on the table so it inherits
so
table {
background: pink;
border: 0;
border-collapse: separate;
border-spacing: 0 5px;
}
thead tr th {
border-bottom: 1px solid red;
border-collapse: separate;
border-spacing: 5px 5px;
}
tbody tr#first td {
border-top: 3px solid #4d4d4d;
border-collapse: separate;
border-spacing: 5px 5px;
}
I changed some of the colors to make it easier to see.
http://jsfiddle.net/jasongennaro/Pf7My/1/
Check the value of border-collapse. If it's collapse, then the browser will merge adjacent borders.
The borders are probable 'merged' by border-collapse. Try setting border-collapse: seperate; on both the tbody and thead
Try setting border-collapse: separate; on both the tbody and thead. Not "seperate"
I think it's better if we put it in the cell element :)
.table-default {
border-collapse: separate; //DON'T FORGET TO MAKE IT SEPARATE
border-spacing: 0;
}
.table-default th {
border-bottom: gray solid 3px;
}
.table-default td {
border-top: white solid 1px;
}
is there any way to apply to a table cells' both the separate and the collapsed border properties to have collapsed but separated? Thanks
EDIT: this is the wanted result:
Perhaps
table {
border-spacing: 1px 0;
}
The closest I can get is:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border: 1px solid black;
}
Unfortunately, this will create a double-thick line between the rows. Negative values are not allowed in the border-spacing property, otherwise -1px would probably work.
You could make the other lines 2px wide if that is acceptable, then at least you wouldn't have differing border thicknesses:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border-width: 1px 2px;
border-style: solid;
border-color: black;
}
table tr:first-child th,
table tr:first-child td {
border-top-width: 2px;
}
table tr:last-child th,
table tr:last-child td {
border-bottom-width: 2px;
}
This can be achieved without using extra div elements in the th & td cells. This solution works in Chrome, Firefox and IE8+.
CSS
table
{
border-collapse: separate;
border-spacing: 10px 0px;
}
td, th
{
padding: 10px;
border: 1px solid #000;
border-top: none;
}
table tr:first-child th
{
border-top: 1px solid #000;
}
Change table tr:first-child th to table tr:first-child td if the table's first row doesn't contain table header cells (TH).
See my jsfiddle here: Table with column spacing but collapsed row border
No, the border-collapse does not allow for separate defining of the horizontal and vertical. You can achieve it with extra markup (which, on a table, could end up being a lot of extra markup), so I don't advise it, but I will give the code for it:
Html:
<table>
<tr>
<th><div>Header 1</div></th>
<th><div>Header 2</div></th>
</tr>
<tr>
<td><div>Content 1</div></td>
<td><div>Content 2</div></td>
</tr>
<tr>
<td><div>Content 3</div></td>
<td><div>Content 4</div></td>
</tr>
</table>
And css:
table {border-collapse: collapse;}
th, td { border: 0; padding: 0;}
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}
Of course, you may want to use a class on the div or a child selector, some way of only targeting the div if you might have other div's in the table data. The margin controls your horizontal gap, and of course, your padding or border width can be whatever you want.
Is this what you're looking for?
table {
border: 1px solid black;
}
table td {
border: 1px solid red;
margin: 3px;
}
It doesn't use the border-collapse property, but it creates an outer table border with each <td> in its own separate border.