I read in some forums that to make an html table look disabled is to add a layer of div. My problem is I don't know how to do it.
I have 3 questions:
How will I set the div height that it will automatically adjust to the table height whenever the table increases its height when a new row is added.
How will I make the div cover the table. I don't know how to layer html elements.
How am I going to code the javascript that will make my table look disabled when I click 'Disable' button and enable it again when I click 'Enable' button.
tabledisabletest.html
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
table#tblTest {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table#tblTest tr.highlight td {
background-color: #8888ff;
}
table#tblTest tr.normal {
background-color: #ffffff;
}
table#tblTest th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table#tblTest td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
#disabler {
width: 100%;
height: 200px;
background-color: #bbb;
opacity:0.6;
}
</style>
</head>
<body>
<div id="disabler"></div>
<table id="tblTest">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>UK </td>
</tr>
<tr>
<td>Henrik</td>
<td>Denmark</td>
</tr>
<tr>
<td>Lionel</td>
<td>Italy</td>
</tr>
<tr>
<td>Ricardo</td>
<td>Brazil</td>
</tr>
<tr>
<td>Cristiano</td>
<td>Portugal</td>
</tr>
</tbody>
</table>
<input type="button" onclick="disable = true;" value="Disable" />
<input type="button" onclick="disable = false;" value="Enable" />
</body>
</html>
I have the div disabler to do the disabling but I can't make it cover the table.
Please help me with this. I'm so new to this thing.
If you want the disabler element to overlay your table, add a negative bottom-margin to it. Also, set opacity to a value lower than 1, to not completely cover (hide) the table behind it.
#disabler {
opacity: 0.5;
margin-bottom: -200px;
}
Since you've mentioned that you're doing this for educative purposes, I won't give the full solution. See this fiddle to get started.
If you want to make a text look "unselectable", use the following CSS:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
You will have to place the div disabler on top of the table.
You can do so by absolutely positioning the div. I added a new div, tableContainer enveloping the disabler div and the table, and absolutely positioning the div.
<div id="tableContainer"> <!-- New Div-->
<div id="disabler"></div>
<table>....<table>
</div>
Add position: absolute; to the #disabler
And most importantly write the javascript to display and hide the div:
function disableTable()
{
document.getElementById("disabler").style.display = "block";
}
function enableTable()
{
document.getElementById("disabler").style.display = "none";
}
Live Example: http://jsbin.com/icuwug
Related
I'm trying to make a table that has both selectable rows and the ability to sort columns by header. So far I've succeeded in making the rows selectable. However, when I try to combine that with a table sorting plugin (I've tried half a dozen of them), the table sort never works. Either that, or the sorting plugin uses a id that conflicts with the selectable id. Does anyone have a method for table sorting by header that works with jquery UI selectable? Here is my code:
<html>
<body style="background: Lavender;">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: AliceBlue!important; }
#selectable .ui-selected { background: Snow!important; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
th, td {
text-align: left; border: 1px solid black; border-collapse: collapse;
}
</style>
<script>
$(function() {
$( "#selectable" ).selectable({filter: 'tr:not(.disabled)'});
});
</script>
<table id="selectable" style="width:100%; border: 1px solid black; border-collapse: collapse;">
<thead>
<tr class='disabled' style="background: Gainsboro;">
<th>Cat</th>
<th>Dog</th>
<th>Bird</th>
</tr>
</thead>
<tbody>
<tr style="background: skyblue;">
<td>Russian Blue</td>
<td>Beagle</td>
<td>Hawk</td>
</tr>
<tr style="background: skyblue;">
<td>British Shorthair</td>
<td>Black Lab</td>
<td>Blue Jay</td>
</tr>
<tr style="background: skyblue;">
<td>Persian</td>
<td>Pitbull</td>
<td>Cardinal</td>
</tr>
<tr style="background: SkyBlue;">
<td>Sphynx</td>
<td>Poodle</td>
<td>Crow</td>
</tr>
</tbody>
</table>
</body>
</html>
Please note that I'm not interested in jquery UI sorting, I need traditional sorting by clicking on the header for each column. Any ideas?
I was able to figure this out. With something like dataTables, you can easily do nested sorts. This is what I ended up having to change to get it working:
This:
$(function() {
$( "#selectable" ).selectable({filter: 'tr:not(.disabled)'});
To this:
$(function() {
$( "#selectable" ).selectable({filter: 'tr:not(.disabled)'}).DataTable( {
"paging": false,
"info": false
} );
});
I want to have a table, such that if the width of the page decreases the columns of the table should be displayed one below the other.
You can use CSS display properties to alter the way the table behaves. In order to make the table cells sit one on top of the other, you need to create a media query which will set the table and each cell to be display: block at the break point that best suits your needs.
In the example below the table cells will wrap when the screen width shrinks to 500px.
Example
#media (max-width: 500px) {
table {
display: block;
border: solid 1px #f00;
}
table td {
display: block;
border: solid 1px #f00;
}
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Explanation
By default a table tag uses display: table and a table cell uses display: table-cell. By changing these properties we can alter the way the table is displayed.
For more information on display properties see this article:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
For more information on media queries see the following article:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Alright if i understand correctly you want something like this:
http://codepen.io/geoffyuen/pen/FCBEg
This Solution wil make your table responsive so it can do what you are trying to do(at leat i think i know what youre trying to do)
Just some example html code
<h1>RWD List to Table</h1>
<table class="rwd-table">
<tr>
<th>Movie Title</th>
<th>Genre</th>
<th>Year</th>
<th>Gross</th>
</tr>
<tr>
<td data-th="Movie Title">Star Wars</td>
<td data-th="Genre">Adventure, Sci-fi</td>
<td data-th="Year">1977</td>
<td data-th="Gross">$460,935,665</td>
</tr>
<tr>
<td data-th="Movie Title">Howard The Duck</td>
<td data-th="Genre">"Comedy"</td>
<td data-th="Year">1986</td>
<td data-th="Gross">$16,295,774</td>
</tr>
<tr>
<td data-th="Movie Title">American Graffiti</td>
<td data-th="Genre">Comedy, Drama</td>
<td data-th="Year">1973</td>
<td data-th="Gross">$115,000,000</td>
</tr>
</table>
Then we have our CSS
#import "compass/css3";
// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)
$breakpoint-alpha: 480px; // adjust to your needs
.rwd-table {
margin: 1em 0;
min-width: 300px; // adjust to your needs
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
font-weight: bold;
// optional stuff to make it look nicer
width: 6.5em; // magic number :( adjust according to your own content
display: inline-block;
// end options
#media (min-width: $breakpoint-alpha) {
display: none;
}
}
}
th, td {
text-align: left;
#media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
// presentational styling
#import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
#media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}
Hope this helps you
ok so here goes. Im working on expanding my html, css, and javascript knowledge. To do this i began writing a few basic website designs (on a live server, but all made up and fake). On my most recent one, I've decided to go for dropdown menu's. To space this all properly i decided to go with a table element, and use some very basic (which is all i know right now) javascript. I am currently using a .dropdown and a .dropdown:hover to make my menus work. However since i used the table element, each time i "dropdown" my menu on my test page, the other menus titles resize to the size of the dropdown window. Any ideas how to combat this? heres my code....
CSS
.dropdown ul {
display: none
}
.dropdown:hover ul {
display: block;
background-color: white;
}
body {
margin: 0;
padding: 0;
background: -moz-linear-gradient(AliceBlue, White);
background: -webkit-linear-gradient(AliceBlue, White);
background: linear-gradient(AliceBlue, White);
}
table {
align: center;
font-family: cursive;
font-decoration: underline;
}
td {
border: solid 1px Lavender;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
cell-spacing: 6px;
}
h1 {
font-size: 14px;
}
HTML
<div style="text-align: center">
<img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
<td class="dropdown">
<h1>
Search By Department
<ul>
<li>Computers and Laptops
<li>Computer Components
<li>Office Supplies
<li>Phones and PDAs
<li>Speakers and Audio
<li>Tablets and Ipads
</h1>
</td>
<td class="dropdown">
<h1>
Search by Company
<ul>
<li>ACER</li>
<li>AMD</li>
<li>APPLE</li>
<li>BELKIN</li>
<li>BOSE</li>
<li>COBY</li>
<li>DELL</li>
<li>HP</li>
<li>HTC</li>
<li>JVC</li>
<li>LG</li>
<li>PANASONIC</li>
<li>SAMSUNG</li>
<li>SONY</li>
</h1>
</td>
You seem to have guessed it already: don't use table, besides being semantically incorrect (<table> is meant for tables with data) it gives you all kinds of other issues because of their default styling.
Use a straightforward (embedded) ul and position the sub menus absolute, make sure to make the top level menu items (li) position: relative; and display: inline-block; and it should be pretty straightforward from there.
One way to accomplish this is in you td {} style give a specific height such as 'height: 50px' and the float them 'float: left'. might not be the best option but it seems to accomplish it.
If you wish to use plain javascript. That should work fine.
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: -moz-linear-gradient(AliceBlue, White);
background: -webkit-linear-gradient(AliceBlue, White);
background: linear-gradient(AliceBlue, White);
}
table {
align: center;
font-family: cursive;
font-decoration: underline;
}
td {
border: solid 1px Lavender;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
cell-spacing: 6px;
}
h1 {
font-size: 14px;
}
.dd1,.dd2{display:none;}
</style>
<title>Discount Electronics</title>
</head>
<body>
<div style="text-align: center">
<img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
<tr>
<td onmouseover="fun('dd1')"> Search By Department</td>
<td onmouseover="fun('dd2')"> Search by Company</td>
</tr>
<tr><td>
<div class='dd1 dropdown'>
<h1>
<ul>
<li>Computers and Laptops
<li>Computer Components
<li>Office Supplies
<li>Phones and PDAs
<li>Speakers and Audio
<li>Tablets and Ipads
</h1>
</div>
</td>
<td>
<div class='dd2 dropdown'>
<h1>
<ul>
<li>ACER</li>
<li>AMD</li>
<li>APPLE</li>
<li>BELKIN</li>
<li>BOSE</li>
<li>COBY</li>
<li>DELL</li>
<li>HP</li>
<li>HTC</li>
<li>JVC</li>
<li>LG</li>
<li>PANASONIC</li>
<li>SAMSUNG</li>
<li>SONY</li>
</h1>
</div>
</td></tr>
</table>
<script type='text/javascript'>
function fun(cls){
var arr=document.getElementsByClassName('dropdown');
for(i=0;i<arr.length;i++)
{
arr[i].style.display='none';
}
document.getElementsByClassName(cls)[0].style.display='block'
}
</script>
</body>
</html>
I've made 4 buttons that each link to a different table.
I'm having trouble individually coloring each button using css... For example, I'd like the first button to be red and the second to be blue, ect.
I really appreciate the help. Thanks.
link to demo: http://jsfiddle.net/LpLhP/8/
html:
<a class="button" data-table="1" href="#">Slifer Level</a>
<a class="button" data-table="2" href="#">Ra Level</a>
<a class="button" data-table="3" href="#">Obelisk Level</a>
<a class="button" data-table="4" href="#">Exodia Level</a>
<table id="1">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<table id="2">
<thead>
<tr>
<td>Sport</td>
<td>Gender</td>
<td>Hair Color</td>
</tr>
</thead>
<tbody>
<tr>
<td>Baseball</td>
<td>Female</td>
<td>Blonde</td>
</tr>
<tr>
<td>Curling</td>
<td>Female</td>
<td>Brown</td>
</tr>
<tr>
<td>Hockey</td>
<td>Male</td>
<td>Black</td>
</tr>
</tbody>
</table>
<table id="3">
<thead>
<tr>
<td>Favorite TV Show</td>
<td>Favorite Band</td>
<td>Favorite Food</td>
</tr>
</thead>
<tbody>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
</tr>
<tr>
<td>Lost</td>
<td>Fall Out Boy</td>
<td>Steak</td>
</tr>
<tr>
<td>The Office</td>
<td>OneRepublic</td>
<td>Waffles</td>
</tr>
</tbody>
</table>
<table id="4">
<thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</thead>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
<td>1</td>
css:
body{
font-family: sans-serif;
font-size: 16px;
line-height: 1.5em;
text-align: center;
margin-top: 1.5rem;
}
a{
margin: 0.5rem;
}
a.button{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
table{
width: 80%;
margin: 2em auto;
border: 2px solid black;
}
tr:nth-child(even){
background-color: #F7F7F7;
}
thead{
background-color: darkgrey;
}
th{
padding: 0.75em 0;
}
td{
padding: 0.7em 1em;
}
java:
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
use nth:child() selector in your css as
a.button:nth-child(2){
background-color: #4679BD;
}
http://jsfiddle.net/LpLhP/17/
Give each 'button class' a fellow class such as the following:
<a class="button red" data-table="1" href="#">Slifer Level</a>
<a class="button blue" data-table="2" href="#">Ra Level</a>
<a class="button green" data-table="3" href="#">Obelisk Level</a>
<a class="button yellow" data-table="4" href="#">Exodia Level</a>
Then, give the CSS for each new class you defined
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }
there are several ways to do this, the easiest is to make an extra class
<button class="button red"></button>
.red{
background-color:red;
}
button:nth-of-type(1) <--- First Button Styling
Try This
a.button[data-table="1"]{background-color:red ;}
a.button[data-table="2"]{background-color: blue;}
a.button[data-table="3"]{background-color: green;}
a.button[data-table="4"]{background-color: black;}
DEMO
why not add css
a.button:nth-child(1){
background-color:red;
}
a.button:nth-child(2){
background-color:blue;
}
<a class="buttona" data-table="1" href="#">button1</a>
<a class="buttonb" data-table="2" href="#">button2</a>
<a class="buttonc" data-table="3" href="#">button3</a>
<a class="buttond" data-table="4" href="#">button4</a>
.buttona{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
.buttonb{
background-color: blue;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: red;
}
}
Use Different CSS for each button like this.
Change the background-color and the hover background-color.
<style>
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
.button{
color: #fff;
padding: .5rem;
border-radius: 5px;
text-decoration: none;
}
</style>
<a class="button" id="red" data-table="2" href="#">button2</a>
<a class="button" id="blue" data-table="2" href="#">button2</a>
<a class="button" id="grren" data-table="2" href="#">button2</a>
Try this.
Hope this helps.
give individual ids to buttons.
<a class="button" id="button1" data-table="1" href="#">button1</a>
<a class="button" id="button2" data-table="2" href="#">button2</a>
<a class="button" id="button3" data-table="3" href="#">button3</a>
<a class="button" id="button4" data-table="4" href="#">button4</a>
Working Demo
Data table is a pretty good way to target too, but this is probably more versatile site wide. nth of type is great for lists and stuff, but I doubt you'll get much reuse out of it in this situation. You also don't really need adjacent selectors like a.red-button etc.
I'd go with a site wide button style and then block element modifier style.
Here is a fiddle too:
HTML
Button
<button class="button">Button</button>
<input type="submit" class="button" value="button" />
CSS
.button { /* button reset - base */
display: inline-block; /* makes sure you can use margin-top etc */
border: 0; outline: 0; /* overrides defaults */
margin: 0; padding: 0;
border-radius: 0; /* overrides defaults */
background: gray; /* overrides background image */
font-family: inherit; /* gets parent font */
color: inherit; /* gets parent color */
text-align: center;
text-decoration: none;
-webkit-appearence: none; /* removes ios styling defaults */
-moz-appearence: none;
appearence: none;
cursor: pointer;
font-size: 1.2em;
padding: .5em .7em
}
/* specific styles */
.light {
background: red;
}
.dark {
background: purple;
}
.selector {
background: color;
}
.big-button {
font-size: 1.6em; /* etc. */
}
now, use those styles with the data table if you want - I see you are using sass - so you can exted these "mini-themes" to buttons, or divs or whatever and reuse common color combinations
.button[data-table="1"] {
#extend .light;
}
or
a[data-table="1"] {
#extend .dark;
#extend .big-button;
}
/* or make them #mixins and #include them if that suits you better */
I have a table with expand/collapse javascript acting on the class value assigned to tr.
See below html code.
This all works fine in Chrome, but in IE when I expand and then collapse the www row, I get additional unwanted lines in the xxx and zzz rows. The lines look like they are borders (see css td border-style definition). It looks as if the borders of the collapsed and hidden rows are still shown (non-button rows are a little less high than the button rows, apparently because of standard button padding and border widths).
Why is this, and how can I prevent this from occurring?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
body, p {
background-color: white;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: black;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
input.buttonSeq {
color: blue;
background: ffffcc;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
var trs = document.getElementsByTagName('tr');
for (var i=0; i!=trs.length; i++) {
if (trs[i].className == clss) {
if ( trs[i].style.display == "none")
{
trs[i].style.display = "table-row"
}
else {
trs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<br><br>
<table style="table-layout:fixed word-break:break-all">
<col width="120">
<thead>
<tr>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
</td>
</tr>
<tr style="display:none" class="www">
<td>element1</td>
</tr>
<tr style="display:none" class="www">
<td>element2</td>
</tr>
<tr style="display:none" class="www">
<td>element3</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
</td>
</tr>
<tr style="display:none" class="xxx">
<td>element4</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
</td>
</tr>
<tr style="display:none" class="zzz">
<td>element5</td>
</tr>
</tbody>
</table><br></body>
</html>
You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model and Javascript support, among other things.
Example:
<!doctype html>
Specifying the doctype will make your example work as it does in Firefox.
Edit:
The grey background comes from the following rule, which is technically wrong (you need to specify the # symbol when using hex colors:
input.buttonSeq {
color: blue;
background: ffffcc; /* change this to #ffffcc */
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
Rather than setting the display to "table-row", set it to "" so that the default behaviour comes back. Older versions of IE don't support table-row and need block instead.
If your CSS overrides the default (ie. if you used it to hide a class of rows from the start), try:
try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}
And add a DOCTYPE, like wsanville said.