Designing a simple HTML table that I am going to implement alternate-row coloring on... but before I even start to do this, it appears that FF4 has applied alternate-row coloring automatically to the plain HTML table. Even after specifying my own alternate row colors that are shown properly in IE, Chrome, etc, FF still shows it's own chosen color for the alternate rows (odd numbered rows), which is a light blue color.
I've searched all over, but can't find anything related to this issue - anyone have a solution? Some FF-specific CSS I need to include to 'force' it to show my alternate color scheme?
Here is the table markup:
<table id="myTable">
<tr><td>Bill</td><td>Smith</td></tr>
<tr class="rowAlternate"><td>Joe</td><td>Blow</td></tr>
</table>
Here is the CSS I am using:
#myTable {margin: 0;}
#myTable tr {background-color: white;}
#myTable tr.rowAlternate {background-color: #EEE;}
FYI, solution is here: How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?
Not sure if I should delete this question or not.
Related
This question already has answers here:
How to create zebra stripes on html table without using javascript and even/odd classes generation?
(5 answers)
Closed 7 years ago.
I am new to coding and I have been having some trouble creating a zebra background for a table...where no matter how I select the elements with CSS, nothing would show up.
the target code looks something like this:
<table class="striped">
<tr>
<td class="main">
Test Submit
</td>
<td>
<button>Submit</button>
</td>
</tr>
where the block (from to ) repeats a few more times, thus creating a table.
And below is the CSS code I attempted to create the zebra background:
table.striped {
tbody tr:nth-child(even){ background: red;}
}
I have searched online for answers and many seem to be sharing the same code as I have written (or something similar)...but mine has nothing showing up.
Did I mistaken how the selectors work in css? That the selector (tbody tr:nth-child(even)) does not target all the even numbered as I had hoped?
And is there a good-way to debug css related question?
console.log doesn't return a very meaningful message most of the time.
Your assistance is much appreciated!
PS. I have found some answers that did the trick in jQuery...but I am sure CSS can do it as well?
First thing I see is that your HTML snippet doesn't seem to be complete: the closing </table> is missing.
Then, you will need more rows to your table to be able to see the custom style on even ones.
And last, you are nesting CSS declarations, thus making them invalid.
Here's a working example based on your code.
--
Edit: Sorry, didn't see the answer was already posted before I posted mine.
You need to add more rows to the table. Because even is each second row.
Also your css is invalid
table.striped tr:nth-child(even) { background: red;}
http://jsbin.com/wigitequxu/edit?html,css,output
I have a wordpress site and all tables seem to be borderless as far as I can see.
When I check it with Firebug I can disable css initialization for <table> element and design seems to be OK. Firebug tells me the CSS code is set in theme's style.css file. I open the file and check the content but there is no such line.
After this I choose a worse way to manually set the style attribute of my <table> HRTML element as follows. I also apply !important directive to override anything.
As far as I can know the style attribute of an HTML element overrides all CSS and previous (inherited or not inherited) style declarations. Also the !important also makes it undestructable. I have used both I still can not make it work.
What am I possibly doing wrong and how can I fix it?
Regards.
P.S. : You can check the faulty content # http://pmiturkey.org/hakkimizda/uyelik/
The table as the bottom of the content.
OK, I played a little with firebug in your website here and had to do a few things:
1) Remove border="1" in that same table
2) Change from style="1 border #000 !important;" to style="1px border #000;"
These changes solve your problem.
EDIT
In order to draw borders around each cell of the table instead, proceed as follows:
1) Remove the table's style attribute
2) In your css file, add the following:
th, td {
border: 1px solid #000;
}
This should add borders around each table cell of yours. Hope it helps!
Well for starters you aren't adding a color to your border border: 1px solid red;. The borders are probably being removed in a css reset. You can add css to the bottom of your styles.css file and that should override any reset.
Also.. are you wanting a border around the table, or a border between the table rows? You might want to specify what exactly you want.
Table cell background color has stopped working for print on all browsers.
Webpages that I have set up to print had color background attributes. They used to print; today they all stopped working.
I tried to just now create a table using basic HTML - assigned the background color to a cell. It won't show the color when you try to print the page!
i.e.
<td style="background-color:#A4FFFF; height:90px; width:90px;">CELL</td>
Have I gone mad or did something change overnight?
I'm fairly sure background colors like that get disabled by default to preserve ink...
Well I can see an CSS style issue. Your width90px has no colon after with 'width' which will break your styles. Otherwise you can specify a print style in the header using #media queries and adding a class to the cell or table
#media print
{
table td.myCell {background-color:#A4FFFF;}
/*or for all table cells*/
table td {background-color:#A4FFFF;}
}
Not a Drupal question, but probably a CSS/HTML question:
I have written a module for Drupal 7 with Bartik theme, which displays a button "Show". When clicked it will fetch JSON data from a PHP script and generate a HTML table as string and finally display that table inside (or instead?) of a <div id="top"></div>
This whole complex stuff (at least for me) works surprisingly fine:
However I have this minor cosmetic problem: I can not get rid of the fine white line between the tabel cells.
I've added <table border="0" cellspacing="0" inline - this doesn't help.
I've added an id to the table <table id="last" and CSS-code:
#last {
border:0;
cell-spacing:0;
}
but this doesn't work either.
When I inspect in Mozilla Firebug or Chrome dev. console - those attributes are there.
Also, I have a non-Drupal page too - it doesn't show those ugly lines.
Any ideas please?
I've read, there are CSS stylesheets, which supposedly reset everything, but they are probably overkill for my problem.
My jsFiddle code works too, but doesn't have the ugly white lines...
I'm not posting the URLs of the above mentioned pages, because they both are in Russian and require registration.
There does not seem to be any code or URL that actually demonstrates the problem, but you could use the brute-force method of adding the following into the stylesheet:
td { border: none !important; }
It sounds like the problem is caused by some CSS code setting a border on the cells, overriding whatever you might set at the table level.
If this does not help, we at least know that the problem is caused by something else than the table and cell elements (perhaps some elements inside the cells?).
It it does help, inspect the td cells to see what is now causing the borders, and write a stylesheet that is sufficient to override that (or edit the settings that cause the borders).
Try giving this:
table {border-collapse: separate;}
The table renders differently in Firefox from IE8/Chrome.
The website is here: http://nordschleife.metaforix.net/118/118/index.php/panasonic.html?id=5&___store=uk&___from_store=default
I'd prefer the looks & feel of the table under IE8/Chrome, as the lines are light gray instead of completely black.
Is there anything I can do to fix this?
you need to give the TD element the light gray border color in the CSS information.
For example
table tr td {border:1px solid #DDD; }