Home/ Questions/Q 544799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T10:41:36+00:00

I created an HTML table and used the following CSS to style the border

  • 0

I created an HTML table and used the following CSS to style the border as I wanted:

  1. The top row and column are to be one color, and the rest of the table is to be stripes alternative row colors.

  2. Regular single black border over each cell

Here is my CSS:

#functionMatrixTable td
{
    border-collapse: collapse;
    border-width: 1px;
    border-color: Black;
    border-style: solid;
}

#functionMatrixTable th
{
    border-collapse: collapse;
    border-width: 1px;
    border-color: Black;
    border-style: solid;
}

#functionMatrixTable tbody tr.odd th, tbody tr.even th {
    background-color: #D8D8D8;
}


#functionMatrixTable tr.odd td{
    background-color: #ffffff;
    padding: 4px;
}

#functionMatrixTable tr.even td {
background-color: #CDE0F6;
    padding: 4px;
}

#functionMatrixTable th
{
    padding: 4px;
    background-color: #D8D8D8;
    color: #787878;
}

The strange issue in Firefox is that it seems to put a border around half of my table but not the rest. Here is an example image. It looks fine in IE8. any ideas what i am doing wrong here?

Screenshot of my HTML table in Firefox. When I click in a cell the border appears. Why?

alt text http://img40.imageshack.us/img40/5126/htmltable.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you have a bug somewhere in the code that generates your HTML, based on that screen-shot, I would say that your table HTML is malformed. Also, the sample CSS you provided seems incomplete.

    I just tried the following sample (with some CSS modifications), and it rendered a table correctly in firefox with borders around all the elements (sorry, I can’t test this in IE):

    <html>
<head>
<style type="text/css">

#functionMatrixTable
{
  border-collapse:collapse;
  border-width:1px;
  border-color: Black;
  border-style: solid;
}

#functionMatrixTable td, th
{
  border-collapse:collapse;
  border-width:1px;
  border-color: Black;
  border-style: solid;
}

#functionMatrixTable tr.odd td{
  background-color: #ffffff;
  padding:4px;
}

#functionMatrixTable tr.even td {
  background-color: #CDE0F6;
  padding:4px;
}

#functionMatrixTable th
{
  padding:4px;
  background-color:#D8D8D8  ;
  color:#787878 ;
}
</style>
</head>
<body>
<table id="functionMatrixTable">
<tr>
<th>AAA</th>
<th>BBB</th>
</tr>
<tr class="odd">
<td>A</td>
<td>B</td>
</tr>
<tr class="even">
<td>C</td>
<td>D</td>
</tr>
<tr class="odd">
<td>A</td>
<td>B</td>
</tr>
<tr class="even">
<td>C</td>
<td>D</td>
</tr>
<tr class="odd">
<td>A</td>
<td>B</td>
</tr>
<tr class="even">
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>

    If your table is static HTML, then something like the above should render in Firefox with no problems. If you’re rendering the table on the fly, then the method you’re using is most likely not compatible with Firefox. Are you using javascript maybe?

    • 0