I am dynamically generating table with around 55 rows and 15 columns. I have set boder width of columns to 1px like this
#tblId td
{
border:1px solid #616161;
background-color:#EEEEEE;
}
But for some cells it show border thicker than 1px!
Here are the part of my table, you can see the difference in borders for upper columns and below columns
Edit
Here is the fiddle http://jsfiddle.net/bz3Da/2/
That is really strange that it is looking good in the fiddle but not at my end, I checked no other classes are affecting the table.
I reset the firefox zoom. It works!!!
perfect.
i found when i zoom in some border will be bold.
blow is my cssenter code here
firefox 50.1 / windows 7
table td, table th { border: 1px solid #e8e8e8;}
table {
border-collapse: collapse;
border-spacing: 0;
}
http://jsfiddle.net/bz3Da/4/
Add !important:
#tblId td
{
border:1px solid #616161 !important;
background-color:#EEEEEE;
}
Inline styles are more important than CSS styles.
You can override them, but you should avoid using !important - just remove inline styles and use CSS only.
Someone has already asked why here:
Should I avoid using !important in CSS?
Related
Table border isn't supported in HTML5, but CSS will apply changes to all of my tables, instead of just 1, is there a way around?
I want to make one table to have borders but the "table border" option is not supported in HTML5, what should I do?
CSS will make changes to all of my tables, instead of just one... is there a way around it? :)
For the border, I think you can do :
table {
border: 1px solid black;
}
/* or, for each cell of your table */
td {
border: 1px solid black;
}
If you want to add this style to only one table, then just add a class to this table, and instead in the css something like :
.your-class {
border: 1px solid black;
}
Hope I could help,
I have some CSS added to support a table that looks like this:
#outertable {
background-color: #000000 !important;
border: 40px black solid !important;
}
#innertable {
background-color: #000000 !important;
border: 20px #A67100 solid !important;
}
#innertable td {
background-color:#F1F1D4 !important;
border: 2px #A67100 solid !important;
}
When I use the above CSS in a stand-alone HTML page, it works fine. There is no other CSS, so there are no conflicts. However, when I incorporated the above CSS into a Joomla template there is a problem, that Table's cell doesn't include what is expected. I used Inspect in Google Chrome web browser and identified the source of the problem. Here is the CSS that's causing the problem to the above CSS:
table, table td {
border-collapse: collapse;
}
While in Inspect in Chrome I can uncheck the box for this CSS code and the page looks like expected. The CSS for this is coming from com_content.css. But I don't want to override this CSS for the entire website, just for the table it's being used in on this specific Joomla web page of the site.
How can I incorporate the above CSS into the CSS at the top of this posting so it has the same effect that unchecking it does in Chrome's Inspect, but only on this table on this web page of Joomla?
I have tried adding a 'border-collapse:separate', but it doesn't do anything:
#innertable td {
background-color:#F1F1D4 !important;
border: 2px #A67100 solid !important;
border-collapse:separate !important;
}
I'm not a CSS expert by any means, so I would greatly appreciate help on this. Thanks!
The border-collapse property affects tables only, not cells, so you need to set it on the table element:
#innertable { border-collapse: separate }
You should also consider using selectors and named HTML elements so that you can apply styles on a per element basis
I have two different style definitions for tables:
table {
border: solid 1px #E8EEF4;
border-collapse: collapse;
}
Because my specific table is inside a <div class="checkboxquestion> i have a special style definition for tables inside this class:
.checkboxquestion table
{
border: none;
text-align: center;
}
The problem is, that border: none; is overriden by border-collapse: collapse; - and every other styling option is overriden by the "default" definition.
How do i solve this?
I think you made another mistake, it works for me the way you did it: Have a look at this fiddle
Perhaps you didn't close the quotation marks for the div's class as you did in the question?
div.checkboxquestion table is also an option ;)
and make sure the specific definition comes after the universal definition.
make a new class and apply it to the table inside of .checkboxquestion
Like:
table, .tabelClass {
border: solid 1px #E8EEF4;
border-collapse: collapse;
}
then apply it to your table:
<table class="tabelClass">
Don't go into specificity wars, especially with yourself.
Define all the common table styles by using selectors like table, tr, td, etc.
If you have two different styles of tables, give them two different classes.
If this is a "one time thing", and you really need everything to be the same:
.checkboxstyle table {
border-collapse: separate;
text-align:center;
border:none;
}
I'm not 100% certain what are you trying to do, but if you're trying to make the border invisible, it would be easier to just color the border in the background color.
.checkboxstyle table {
border-color:blue;
}
You can learn more about specificity here: http://htmldog.com/guides/cssadvanced/specificity/
And remember, forget everything there as soon as you read it, because you don't want to be calculating specificity. If you find you're doing so, you're writing bad css.
I have an HTML table with collapsed and adjacent borders and a standard border on all cells and I want to change the border color of a specific row to something else. The problem is that when the borders are collapsed and neighboring cells have different colors (or styles in general I assume) the browser does not render in a visually acceptable manner.
Here's my HTML:
<table>
<tr><td>Lorem</td><td>Ipsum</td></tr>
<tr><td>Lorem</td><td>Ipsum</td></tr>
<tr id="foo"><td>The border of these cells</td>
<td>is not uniformly red!</td></tr>
<tr><td>Lorem</td><td>Ipsum</td></tr>
</table>
The CSS:
table { border-collapse: collapse; border-spacing: 0 }
td { padding: 5px; border: 3px black solid; }
#foo td { border: 3px red solid; }
There is also a JSFiddle of the above.
How different browsers render it:
IE 7 (standards):
IE 8 and 9 (standards):
Firefox 11 (note the subtle visual artifact on the left red border and the quirky way it chooses to render the corners):
Chrome 18:
The question: What can I do to get a visually acceptable render? Can that render be the ideal of "red borders always take precedence over black ones"?
Clarification:
I am first and foremost looking for a pure CSS solution.
If this is not possible, I would work with something that requires small and localized modifications (i.e. not something I 'd have to do on every table everywhere).
Javascript is acceptable, since in the actual website the styles that control the borders are applied dynamically based on user interaction. The event handlers are set up by code almost identical to this.
I came to this solution without extra-markup : http://jsfiddle.net/fcalderan/PAJzK/12/
the idea is to avoid using border-collapse and using border top/right for table cells and border bottom-left for table element.
tried with IE8, FX11 and CH17, here's the relevant CSS
table {
border-spacing : 0;
border-left : 3px black solid;
border-bottom : 3px black solid;
}
td {
padding : 5px;
border-right : 3px black solid;
border-top : 3px black solid;
}
#foo td { border-color:red; }
/* border left red-coloured using :before pseudoelement */
#foo td:first-child:before {
content : "";
position : relative;
margin-left : -8px;
padding : 8px 0 8px 5px;
border-left : 3px red solid;
}
/* top border of next rows red coloured */
#foo + tr td {
border-top: 3px red solid;
}
here an issue occurs if the highlighted row is the last one: in that case #foo + tr td wouldn't match anything : in that case you could write instead this rule
#foo td:after {
content : "";
position : relative;
margin : 0 0 0 -8px;
display : block;
width : 100%;
height : 3px;
padding : 0 8px;
top : 2px;
margin-bottom : -6px;
border-bottom : 3px red solid;
}
see example in http://jsfiddle.net/fcalderan/PAJzK/14/
You need extra markup, setting e.g. id=before-foo on the preceding row and id=after-foo on the next, with a style sheet addition like
#before-foo td {
border-bottom-color: red; }
#after-foo td {
border-top-color: red; }
Demo: http://jsfiddle.net/8C8Rd/
There can still be issues at cell corners (a corner can be black).
The reason why this cannot be done in a simpler way is that the effect of border collapse had been vaguely defined and inconsistently implemented in browsers. CSS 2.1 drafts even used to leave the color in situations like this browser-dependent. Even though the final CSS 2.1 specification has requirements on this in its border conflict resolution rules, they are not universally implemented—and in this case, they say that the border of the cells of the upper row wins (as in most browsers you tested), so there is no direct way to specify the rendering you describe. That is, you would need to set some styles on the preceding row as well anyway.
css newbie question -
we have a generalized css defined for Table along with its Table Cells as:
.table {
width: 100%;
margin: 1em 0 1em 0;
border-top: 1px solid #A3C0E8;
border-left: 1px solid #A3C0E8;
}
.table td, .table th {
padding: .6em;
border-right: 1px solid #A3C0E8;
border-bottom: 1px solid #A3C0E8;
vertical-align: middle;
background:#D7E8FF;
color:#333;
}
In one scenerio, I want to override td style so that I can show an icon image in front of Table Cell text.
so, if Table Cell is defined as - <td> Vehicle Name & Details </td>
I want to apply style for this Table Cell so that it also show icon image in front of text - 'Vehicle Name & Details'.
I added this style in css file -
.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; }
and added to td as <td class="vehicle"> Vehicle Name & Details </td>
but no icon is being shown. Parent table of this td is <table class="table">
Am I missing something?
Thank you!
.vehicle (one class selector) is less specific than .table td (one class selector + one type selector).
You need either:
a more specific selector (e.g. .table td.vehicle)
an equally specific selector (e.g. td.vehicle) in a rule-set that appears later in the stylesheet
Change your selector to td.vehicle also make sure it appears after .table td selector in your css file.
You can also make the special td's style inline:
<td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td>
Double check to make sure your URL location is correct. I would first put in an absolute path (http://site.com/mainFolder...) first, then change it to a relative path.
try replacing the background position to
background:url(mainFolder/img/icons/vehicle.png) no-repeat left top;
You can also change the no-repeat to repeat for debuging purposes to see if the image loads.
Also i advice u install firebug (if you are using firefox) so you can manipulate html and css on the fly.
It should work, make sure that the route to the image is correct. And also note that is a background image you are setting, so if you don't want the image to be behind the text you have to use padding --> jsfiddle