Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

alexandre_prog

tabela com Scroll não funciona no FireFox

Por , em Desenvolvimento frontend

Recommended Posts

alexandre_prog    0

alexandre_prog
Postado

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>---</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!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

este código está com muitos problemas, diversos hacks, trabalhando em quirks mode forçado.

 

deve ter outra forma de fazer

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

este código está com muitos problemas, diversos hacks, trabalhando em quirks mode forçado.

 

deve ter outra forma de fazer

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre_prog    0

alexandre_prog
Postado

este código está com muitos problemas, diversos hacks, trabalhando em quirks mode forçado.

 

deve ter outra forma de fazer

 

abraço

 

OK... então como fazer???

 

No Internet Explorer , 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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

sugiro que leia o código e remova os hacks ou melhor ainda refaça o cógigo!!

 

englobe a tabela em uma div e defina tamanho de altura e largura e um overflow-y: auto; overflow-x: hidden;

 

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre_prog    0

alexandre_prog
Postado

sugiro que leia o código e remova os hacks ou melhor ainda refaça o cógigo!!

 

englobe a tabela em uma div e defina tamanho de altura e largura e um overflow-y: auto; overflow-x: hidden;

 

Cara, muito obrigado, não "manjo" muito de CSS, você poderia ser mais específico??

 

 

Bom Dia pra!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado
CODE
<!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>
<style type="text/css">
#tbl-container {
width: 500px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
</style>
</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>---</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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Cara

 

tira o estilo do seu HTML pode ser algo nele, no seu arquivo codigo.css

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre_prog    0

alexandre_prog
Postado

Cara

 

tira o estilo do seu HTML pode ser algo nele, no seu arquivo codigo.css

 

abraço

 

Pior que não deu certo ainda parceiro, você chegou a testar esse exemplo no Internet Explorer pra ver a diferença??

 

 

Muito Obrigado!!

 

Bom fim-de-semana!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

cara funciona perfeitamente!!!

 

eu estou sem nenhum local para publicar, mas funciona sim e IE6 IE7 FF 2

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre_prog    0

alexandre_prog
Postado

cara funciona perfeitamente!!!

 

eu estou sem nenhum local para publicar, mas funciona sim e IE6 IE7 FF 2

 

Bom, aqui é o FireFox 3.0.1, talvés possa ser a versão, mas no seu FF2 ai, o cabeçalho azul fica fixo conforme você rola a barra de rolagem da vertical????

 

Porque aqui no meu Computador, só no Internet Explorer acontece isso, no fire fox o cabeçalho azul 'rola' junto...

 

Obrigado!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

não fica porque não coloquei o CSS codigo.css

tenta posicionar o cabeçalho com position: absolute;

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre_prog    0

alexandre_prog
Postado

nem deu certo, bem que no site que achei, falava que só dava certo no Interner Explorer,

 

você conhece algum GRID ou um exemplo de tabela que eu possa dar esse mesmo "efeito" nos dois navegadores IE e FF??

 

 

Obrigado!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Posiciona uma barra superior

cria uma div abaixo com overflow: auto

coloque a tabela dentro desta div

 

e pronto

 

isso a grosso modo

 

vai fazendo o código e mandando que vamos ajudando!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito