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;
}
Related
I want to use a bootstrap 3 table with borders, eg using class="table table-bordered", so that I'll have borders between cells, but I don't want any borders on the outsides of the table.
I tried the following, and it seems to work well for the sides, but I can't think of a nice way to handle the potential top and bottom borders considering that thead and tfoot are optional elements. I was hoping to make something robust that would account for these scenarios, maximizing resuse potential.
.table-bordered.no-outside-borders {
border: none;
}
.table-bordered.no-outside-borders>thead>tr>td:first-child,
.table-bordered.no-outside-borders>thead>tr>th:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>th:first-child {
border-left: none;
}
.table-bordered.no-outside-borders>thead>tr>td:last-child,
.table-bordered.no-outside-borders>thead>tr>th:last-child,
.table-bordered.no-outside-borders>tfoot>tr>td:last-child,
.table-bordered.no-outside-borders>tfoot>tr>th:last-child,
.table-bordered.no-outside-borders>tbody>tr>td:last-child,
.table-bordered.no-outside-borders>tbody>tr>th:last-child {
border-right: none;
}
Is there a nice css solution here?
I had the same problem yesterday, the css code I used for this was:
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
border: none;
max-height: 200px;
font-size: 20px;
border-right: 1px solid gray;
border-collapse: collapse;
}
.table.table-borderless {
border-right: 1px solid gray;
border-collapse: collapse;
max-height: 200px;
font-size: 20px;
}
I'm trying to get the table in html fully copied from browser (works in Chrome) to Word document. What happens is that last row's border doesn't get passed in Word.
Take the code:
HTML:
<table id="t6">
<tr><th></th><th>raw_alpha</th><th>std.alpha</th><th>G6(smc)</th><th>average_r</th></tr>
<tr><td>gse1</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr>
<tr><td>gse10</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr>
</table>
CSS:
table, th, tr, td {
background-color:white;
border-spacing: 0;
padding: 2px 6px;
border-collapse:collapse;
text-align: right;
}
th {
background-color: white;
color: black;
border-width:1px;
border-color: #000;
border-style: solid none solid none;
}
tr:last-child {
border: 1px solid #000;
border-style: none none solid none;
}
Is there any way to make the last row's border be included? Also is there a possibility for this to work in Firefox?
Borders applied to tr elements are apparently not recognized, so you need to apply them to td instead.
In your CSS, change tr:last-child to tr:last-child td and it should work.
I am trying to create a table that has rounded top borders on either side, but the rest of the table's borders are squared.
When I apply this CSS the border remain squared, but the background-color does get rounded off, which creates a weird look:
table {border-collapse:collapse}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}
The result is this:
How do I 'round' the borders in the top left/right header cells please so that the red border follows the background?
Please see the JSFiddle for a working example.
This is because border collapsed with:
CSS
table {
border-collapse: collapse;
}
Look at quick fix.
change:
table {
border-collapse: collapse;
}
to:
table {
border-collapse: separate;
border-spacing: 0px 0px;
}
DEMO
It can be solved rather simply by assigning the border properties only to the table tag instead of assigning them to the th tag and td tag.
table {
background: #ccc;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-top: 1px solid red;
}
th {
width: 70px;
}
th, td {
text-align: left;
}
http://jsfiddle.net/Tomer123/z5832/9/
Use the code in this way:
table {border:collapse;}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
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;
table{border:1px solid #000;} doesn't seem to work without the border=1 statement.
In the same way as changing <input width=30> into input{width:400px;}, I would like to use <table> and declare the border in css only. Is that possible?
Update
my mistake was using
table{border-width:1px;}
instead of e.g.
table{border:1px solid #000;}
--which works fine.
Use this CSS:
table {
border-collapse: collapse
}
td {
border: 1px solid #000
}
Live Demo
border-collapse: collapse is important; without it you get doubled borders, like this.
Absolutely - that is the preferred way. You might have to style td as well as tr.
Try this in CSS
table
{
border:1px solid black;
}
then you can use it in HTML
<table>
....
</table>
yes, but if you use table, it will affect ALL tables in your html.
I suggest doing:
<table class="myTable"> and then .myTable { /*css*/ }
Your style should be:
table td { border: 1px solid #000000; }
See a working example here.
If you are using, <th> for headers, with the code below, you will not get borders around our headers:
td { border: 1px solid #000000; }
you will need to also add:
th { border: 1px solid #000000; }
Regards,