tabela com Scroll não funciona no FireFox

Setembro 2, 2008

Pessoal, recentemente achei um código muito interessante na Internet, só que não funciona no FireFox, gostaria de fazer funcionar!!

Vejam o código::::

codigo.css

div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}

div#tbl-container table th {
width: 100px;
}

thead th, thead th.locked    {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default; 
}
    
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /* IE5+ only */
z-index: 20;
}

thead th.locked {z-index: 30;}

td.locked,  th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /* IE5+ only */
position: relative;
z-index: 10;
}

/*these styles have nothing to do with the locked column*/
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
}

td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
text-align: right;
}

button {
width: 150px; 
font-weight: bold;
color: navy;
margin-bottom: 5px;
}

div.infobox {
position:absolute; 
top:110px; 
left:470px; 
right:5px; 
border: double 4px #6633ff;
padding:8px; 
font-size:12px; 
font-family:Arial, sans-serif; 
text-align:justify; 
text-justify:newspaper; 
background-color:whitesmoke;
}

blockquote    {
font-family: Tahoma, Verdana, sans-serif;
font-size: 85%;
border: double 4px #6633ff;
padding: 8px 20px;
margin: 3% auto auto 0;
background-color: whitesmoke;
width: 418px;
}

.sig    {
color:#6633ff;
font-style: italic;
letter-spacing: 2px;
}

tabela.html

<!-- this comment puts all versions of Internet Explorer into "reliable mode." -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lock Columns, Column Locking, Freeze Columns in HTML Tables</title>
<link rel="stylesheet" href="codigo.css" type="text/css">

<meta name="keywords" content="freeze HTML table columns; lock columns; freeze columns; CSS column locking; prevent column scroll; fixed column; fixed table header; lock header; freeze header; CSS tips; freezing column;">

<script type="text/javascript">
function lockCol(tblID) {

    var table = document.getElementById(tblID);
    var button = document.getElementById('toggle');
    var cTR = table.getElementsByTagName('TR');  //collection of rows

    if (table.rows[0].cells[0].className == '') {
        for (i = 0; i < cTR.length; i++)
            {
            var tr = cTR.item(i);
            tr.cells[0].className = 'locked'
            }
        button.innerText = "Unlock First Column";
        }
        else {
        for (i = 0; i < cTR.length; i++)
            {
            var tr = cTR.item(i);
            tr.cells[0].className = ''
            }
        button.innerText = "Lock First Column";
        }
}
</script>

</head>
<body>
<button onClick="lockCol('tbl')"  id="toggle">Lock First Column</button>
<div id="tbl-container">

<table id="tbl">
<thead>
<tr>
        <th>Name</th>
        <th>Major</th>
        <th>Sex</th>
        <th>English</th>
        <th>Japanese</th>
        <th>Calculus</th>
        <th>Geometry</th>
</tr>
</thead>

<tbody>

  <tr>
    <td>Student01</td>
    <td>Languages</td>
    <td>male</td>
    <td>80</td>
    <td>70</td>
    <td>75</td>
    <td>80</td>

  </tr>
  <tr>
    <td>Student02</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>90</td>
    <td>88</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student03</td>
    <td>Languages</td>
    <td>female</td>
    <td>85</td>
    <td>95</td>
    <td>80</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student04</td>
    <td>Languages</td>
    <td>male</td>
    <td>60</td>
    <td>55</td>
    <td>100</td>
    <td>100</td>

  </tr>
  <tr>
    <td>Student05</td>
    <td>Languages</td>
    <td>female</td>
    <td>68</td>
    <td>80</td>
    <td>95</td>
    <td>80</td>

  </tr>
  <tr>
    <td>Student06</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>100</td>
    <td>99</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student07</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>85</td>
    <td>68</td>
    <td>90</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student08</td>
    <td>Languages</td>
    <td>male</td>
    <td>100</td>
    <td>90</td>
    <td>90</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student09</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>80</td>
    <td>50</td>
    <td>65</td>
    <td>75</td>

  </tr>
  <tr>
    <td>Student10</td>
    <td>Languages</td>
    <td>male</td>
    <td>85</td>
    <td>100</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student11</td>
    <td>Languages</td>
    <td>male</td>
    <td>86</td>
    <td>85</td>
    <td>100</td>
    <td>100</td>

  </tr>
  <tr>
    <td>Student12</td>
    <td>Mathematics</td>
    <td>female</td>
    <td>100</td>
    <td>75</td>
    <td>70</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student13</td>
    <td>Languages</td>
    <td>female</td>
    <td>100</td>
    <td>80</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student14</td>
    <td>Languages</td>
    <td>female</td>
    <td>50</td>
    <td>45</td>
    <td>55</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student15</td>
    <td>Languages</td>
    <td>male</td>
    <td>95</td>
    <td>35</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student16</td>
    <td>Languages</td>
    <td>female</td>
    <td>100</td>
    <td>50</td>
    <td>30</td>
    <td>70</td>

  </tr>
  <tr>
    <td>Student17</td>
    <td>Languages</td>
    <td>female</td>
    <td>80</td>
    <td>100</td>
    <td>55</td>
    <td>65</td>

  </tr>
  <tr>
    <td>Student18</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>30</td>
    <td>49</td>
    <td>55</td>
    <td>75</td>

  </tr>
  <tr>
    <td>Student19</td>
    <td>Languages</td>
    <td>male</td>
    <td>68</td>
    <td>90</td>
    <td>88</td>
    <td>70</td>

  </tr>
  <tr>
    <td>Student20</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>40</td>
    <td>45</td>
    <td>40</td>
    <td>80</td>

  </tr>
  <tr>
    <td>Student21</td>
    <td>Languages</td>
    <td>male</td>
    <td>50</td>
    <td>45</td>
    <td>100</td>
    <td>100</td>

  </tr>
  <tr>
    <td>Student22</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>100</td>
    <td>99</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student23</td>
    <td>Languages</td>
    <td>female</td>
    <td>85</td>
    <td>80</td>
    <td>80</td>
    <td>80</td>

  </tr>
  </tbody>
</table>


</div> <!-- end tbl-container -->
</body>
</html>

Como resover? Ou se alguém tiver algo parecido com isso, me passe também,

por favor!!

Muito Obrigado!!!!

TibumWeb · Setembro 2, 2008

Bom se o código faz a tabela ter barras de rolagem então funcionou perfeitamente aqui do FireFox. E não alterei em nada, vê se você esta chamando certo a CSS.

Setembro 2, 2008

Bom se o código faz a tabela ter barras de rolagem então funcionou perfeitamente aqui do FireFox. E não alterei em nada, vê se você esta chamando certo a CSS.

Não parceiro, tenta fazer com o Internet Explorer e veja a diferença, o cabeçalho da tabela fica fixo ao rolar as 2 barras de rolagem, e no FireFox isso não acontece, e é isso que preciso fazer nos 2 navegadores...

Obrigado!

Entrar

tabela com Scroll não funciona no FireFox

Pergunta

Guest alexandre_prog

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

TibumWeb

Link para o comentário

Compartilhar em outros sites

Guest alexandre_prog

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades