How can I achieve a similar effect as in http://jsfiddle.net/eLWe3/2/, but without the additional markup?
I tried with tr:before {}, but it messes with the table. Solution has to work with IE8 and up, fallback to a single border on IE7 is okay.
This fork of your original example is as close as I could get. The updated CSS is:
table { margin: 0 auto; border-collapse:separate; }
thead { background: #FDECEE; }
th { font-weight: bold; }
tbody tr:last-child td { border-bottom: 1px solid blue; }
tfoot td { border-top: 1px solid pink; }
But, as you can see, I've not been able to get the 2px gap you wanted between the two borders. As far as I know, this won't be possible without additional markup of some description: hopefully I'm wrong.
Edit - I've created a new example that uses generated content to get the gap you're after:
tbody tr:last-child td:after {
content:'';
display:block;
border-bottom: 1px solid blue;
margin-bottom:2px;
}
It works in Firefox, Chrome and IE9+, falling back to a single border for less capable browsers. The only reason IE8 fails is because it lacks support for last:child to target the final row in the tbody. You could add a class to the last row in the table (either directly or using JavaScript) to get it working in that browser.
not a great idea but use a background image on the relevant row/cell
Maybe this is an acceptable alternative:
tbody {
border-bottom: 2px outset pink;
}
Related
I have a Table in which there are TD's. In one of those td's, I am applying border. It is
working fine in CHROME, but its getting disturbed in IE.
NOTE:- Earlier, when the cellpadding of the table was 2 it was looking fine but when I increased the cellpadding the border got disturbed.
Here is how it looks like
and here is the fiddle
what should I do to make it work in IE
Do you mean you want it looking like this?
https://jsfiddle.net/Hastig/o1j88quk/3/
If so add table { border-collapse: collapse; } to your css.
May also have to remove cellspacing="10" from inline style of table
To remove middle line
change
tr.black-border td {
border-top: 1px solid #0D63B0;
border-bottom: 1px solid #0D63B0;
}
to
tr.black-border:nth-child(3) td {
border-top: 1px solid #0D63B0;
}
tr.black-border:nth-child(4) td {
border-bottom: 1px solid #0D63B0;
}
Alternatively, you can control the border style by adding classes, if old IE has a problem with nth-child(x)
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 need to get rid outer border, just cells border and there should be space between cells . I can't get why it builds this outer border around the table, I just tried this code in separate file
table {
border-collapse: separate;
border-spacing: 4px;
}
table td, table th {
border: 1px solid black;
}
and it display correctly. But on website content it make this outer border. Can somebody help me?
Just do in your css:
.tribe-events-calendar
{
border: 0px!important;
}
OR
#big
{
border: 0px!important;
}
Or, if it's already there the class or id, modify these values to set them as said. Beware the class, because supposedly it should affect other elements.
Reading again your question, if you set it in a different stylesheet it could happen that it overwrites the values of the 0px with the values of the Npx from the other sheet. Merge them into one, or, if you cannot, put the !important; mark after the css that says 0px.
If nothing works, embed (not include) it at the beginning of your file. Last and least (read: NOT ADVISABLE), use inline css.
I tried to add this: "border: none;" to the table element itself inside the HTML and it worked.
I think your problem is this:
table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBB;
}
It overrides your css.
Use chrome's "inspect element" or firebug for Firefox to see the problem.
You Just need to change only one place that is,
Original Code
table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBBBBB;
After Modification
table.tribe-events-calendar td {
border: 1px solid #BBBBBB;
You can use Firefox FireBug for inspect and do Live edits for CSS and Jquery.
Is there a possibility to have a visual separator between two lines (tr) in an HTML table.
I tried with a <br> but this is not valid code.
I tried do add a padding-top to the tr after the break but it does not work.
Currently I use an empty line:
<tr><td colspan=\"X\"> </td></tr>
but I don't think this is the best solution, especially as I have to make sure the colspan is adjusted if there is a change is the number of columns.
Is there any way to solve this?
Edited to reflect my re-reading the question rather than the title of the question (original answer remains below the rule).
If you want a visual separator (rather than simply white-space) then simply use:
td {
border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */
}
The only way to increase spacing between table rows, that I'm currently aware of, is to use padding on individual rows/cells:
td {
padding: 0.5em 1em;
border: 1px solid #ccc;
}
JS Fiddle demo
Although there is the potential to use transparent (or background-color-ed borders):
table {
border-collapse: separate;
}
td {
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
}
td:hover {
border-color: #ccc;
}
JS Fiddle demo
The <tr /> element is not stylable in all browsers however you could always add the padding or a bottom-border to the cells within the tr.
Actually, I use separate trs for this purpose all the time. I style them (e.g. the one td within) via a separator class.
About the colspan-problem see Colspan all columns.
I am using Firefox 3.5.7 and I have the same CSS used in multiple HTML tables, but there are some examples where parts of the borders are not shown.
What makes no sense to me is that the same CSS on the same page for another HTML table works fine. Also, the same page in Internet Explorer looks fine from a border point of view.
Here is an image with an example, as you can see in this case the bottom of the first table is missing a border.
Does anyone have a clue why this would happen here?
Maybe you've zoomed in/out a bit. This can happen either accidently or knowingly when you do Ctrl+Scrollwheel. Maybe it isn't completely resetted to zoom level zero. This mis-rendering behaviour is then recognizeable at some websites, also here at SO.
To fix this, just hit Ctrl+0 or do View > Zoom > Reset to reset the zoom level to default.
This is Firefox/Gecko bug 410959. This affects tables with border-collapse:collapse. It's from 2008 and there's no real progress on it, so you'll probably need to find a workaround. One way is using border-collapse:separate and fiddling with borders on a per-cell basis.
I found a similar problem when zoomed out in Firefox on an application I am working on.
The main cause was having the CSS border-collapse property set to collapse.
Changing it to separate instead fixed the problem. However, that meant I did have to rethink the way borders are applied to various parts of the table, because otherwise your borders will appear to double in thickness. I ended up having to use jQuery to give a special "last" class to the last td or th in each tr, and to the last tr in the table. My query was something like:
$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last');
My CSS rules were similar that:
table
{
border-collapse: separate !important;
}
table tr, table th, table td
{
border-right-width: 0;
border-bottom-width: 0;
border-left: 1px solid black;
border-top: 1px solid black;
}
table td.last, table th.last
{
border-right: 1px solid black;
}
table tr.last td
{
border-bottom: 1px solid black;
}
table
{
border: 0;
}
I did end up using browser targeting so that I only applied these rules to Firefox users, but it may work for all browsers, I haven't tested.
Building on the good answer of #GregL (I seem unable to "comment" directly on it):
Instead of using JQuery to generate a "last" class, I simply used the built-in pseudo-element selector :first-child. I built rules selecting tr:first-child and td:first-child that define border-top and border-left (instead of border-right and border-bottom as in GregL's answer). The generic rules define border-right and border-bottom instead of border-left and border-top. :first-child is said to be supported in Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1, and Opera v. 9.6 (). Tested on Firefox v. 40.0.3, where I saw this problem in the first place.
This was caused by the table (with a missing bottom-border) to be inside a div...The border apparently didn't get calculated in the table height, so the border was there but wasn't shown.
Giving the surrounding div a margin-bottom from 1px solved the problem.
Just use border-spacing:0; hope this will solve your problem.
Border started going missing when browser zoom was increased. I was able to solve it by doing the following. Tested in Chrome and Firefox.
padding: 0.5px !important
I had the same problem with missing table border.
My solution is:
table{
border-collapse: collapse !important;
border-spacing: 0px;
border: 1px solid #DDD;
}
And border for table rows:
table tr{
border-bottom: 1px solid #DDD !important;
}
I am using Bootstrap either in my layout and the table has also bootstrap css classes like "table table-striped table-bordered"
This solution works for me, when I tried solution with
border-collapse: separate !important;
it didn't work properly for me.
worked for me realisation of answer #Donald Payne
*( .table - bootstrap class )
table.table {
border-collapse: separate !important;
}
table.table tr,
table.table th,
table.table td {
border-right-width: 0 !important;
border-bottom-width: 0 !important;
border-left: 1px solid #DDD !important;
border-top: 1px solid #DDD !important;
}
table.table td:last-child,
table.table th:last-child {
border-right: 1px solid #DDD !important;
}
table.table tr:last-child td {
border-bottom: 1px solid #DDD !important;
}
table.table {
border: 0 !important;
}
table.table thead tr:last-child th,
table.table thead tr:last-child td {
border-bottom: 1px solid #DDD !important;
}
table.table tbody tr:first-child th,
table.table tbody tr:first-child td {
border-top-width: 0 !important;
}
This is a bit tangential, but for those searching for missing borders in Firefox…
I had a border-bottom of a table-row (<tr>) that was missing where a background had been set on a specific cell. It turned out this was caused by a rogue position: relative on the cell, removing that (or changing it to position: inherit) fixed it.
Firefox 70.0.1