Hola maestros,
lo que pretendo hacer es fijar la fila de títulos de mi tabla. Algo estilo de Excell. Sé que es un tema muy sobado, pero creedme que he hecho mil búsquedas y probado mil soluciones (Javascript, el plugin JQuery Chromatable) pero no he conseguido adaptar ninguno de esos ejemplos a mi caso particular.
Por eso les coloco mi código, para ver si me pueden guiar en mi caso concreto.
Por cierto, en el código puede que haya muchos restos de código residual que no tenga ninguna función. Eso es fruto de mis innumerables pruebas...
Este es el código de mi página ASP
Código:
<%@language="vbscript"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Ofertas Anuales Proveedores</title>
<!--<link rel="stylesheet" type="text/css" href="css/estilos.css" media="screen" /> -->
<!--Uso el plugin JQuery Chromatable-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--<script type="text/javascript" src="javascript/jquery.chromatable.js"></script>-->
<script>
$("#mitabla").chromatable({
width: "900px",
height: "400px",
scrolling: "yes"
});
</script>
</head>
<body>
<div id="pagewidth" >
<div id="wrapper" class="clearfix">
<div id="cabecera"> <h2>Cabecera</h2><p>Se recomienda una resolución de pantalla de al menos 1280 x 1024 píxeles</p><br />
</div>
<div id="contenido"><h1>OFERTAS ANUALES PROVEEDORES</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<table id="mitabla">
<thead>
<tr>
<th>FAMILIA</th>
<th>CÓDIGO</th>
<th>DESCRIPCIÓN</th>
<th>PREV. ANUAL</th>
<th>PRECIO UNIT.</th>
<th>UD. EMBAL.</th>
<th>EMBAN.</th>
<th>PLAZO</th>
<th>FABRICANTE</th>
<th>REF. FABRIC.</th>
<th>OBSERVACIONES</th>
<th>HOMOL.</th>
</tr>
</thead>
<tbody>
<%
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("./bd/cliente.csv"), 1)
do while f.AtEndOfStream = false
linea = f.ReadLine
linea = split(linea, ";")
Response.Write "<tr>"
for i = 0 to ubound (linea)
Response.Write "<td><input type='text' name='" & i & "' value='" & linea(i) & "' /></td>"
next
Response.Write "</tr>"
loop
f.Close
Set f=Nothing
Set fs=Nothing
%>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Y este es el código de mi archivo CSS
Código:
@charset "UTF-8";
/* CSS Document */
/* ******************************************************************** */
/* Layout de la web */
/* ******************************************************************** */
html, body{
margin:0;
padding:0;
}
#pagewidth{}
#cabecera{
width:99%;
clear:both;
position:relative;
border: 1px dashed #660000;
}
#contenido{}
/* ******************************************************************** */
/* Estilos del formulario */
/* ******************************************************************** */
#contenido table tr td input:focus {
border: 2px solid #000;
background: #F3F3F3;
}
/* ******************************************************************** */
/* Estilos de los inputs */
/* ******************************************************************** */
/*Efecto al establecer el foco en un input*/
#contenido table tr td input:focus {
border: 2px solid #FFFFFF;
background: #F3F3F3;
}
/* ******************************************************************** */
/* Estilos de la tabla */
/* ******************************************************************** */
/*Efecto al pasar el ratón por encima*/
#contenido table tr:hover {
background:#FDFAD5;
}
table {
border: solid 1px #D5D5D5;
border-collapse: collapse;
width:100%;
}
table td {
border:1px solid #D5D5D5;
font-size:12px;
padding:7px 5px;
}
table th {
background-color:#FF9933;
border-right:1px solid #D5D5D5;
font-size:13.5px;
line-height:120%;
font-weight:bold;
padding:8px 5px;
text-align:left;
}
.ui-resizable {
position:relative;
}
.ui-resizable-handle {
display:block;
font-size:0.1px;
position:absolute;
z-index:99999;
}
.ui-resizable-s {
background:#EEEEEE url(../images/grippie.png) no-repeat scroll center 2px;
border-top:1px solid #CCCCCC;
bottom:-5px;
cursor:s-resize;
height:14px;
left:0;width:100%;
}
/* ******************************************************************** */
/* Estilos de la cabecera flotante */
/* ******************************************************************** */
.cabeceraflotante{
width:900px;
}
.cabeceraflotante1{
width:7000px;
}
Muchas gracias de antemano!!