Hola a todos
Tengo una tabla donde quiero fijar el encabezado y la primer columna, al mover el scroll horizontalmente quiero que la primer columna se quede fija y al mover el scroll vertical el encabezado este fijo.
Ya puedo hacer lo del scroll vertical pero lo del scroll horizontal no lo he podido lograr, espero me puedan ayudar, asi tengo el style y la tabla:
<style type="text/css">
#container {display:block;}
#header{display:block;overflow:hidden;width:700px; }
#content {display:block;overflow:auto;position:relative;wid th:700px;height:300px;}
</style>
<script>
function getOnScroll(from) {
return function (event) {
if (navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Opera")
{
from.scrollLeft = event.srcElement.scrollLeft;}
else{
from.scrollLeft = event.target.scrollLeft;
}
};
}
function addSyncScroll(from, to) {
removeSyncScroll(from);
from.syncScroll = getOnScroll(from);
from.syncTo = to;
if (navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Opera"){
to.attachEvent("onscroll", from.syncScroll);
}
else {
to.addEventListener("scroll", from.syncScroll, true);
}
}
function removeSyncScroll(from) {
if (from.syncTo != null) {
if (navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Opera") {
from.syncTo.detachEvent("onscroll", from.syncScroll);
}
else{
from.syncTo.removeEventListener("scroll", from.syncScroll, true);
}
}
from.syncTo = null;
from.syncScroll = null;
}
</script>
<body>
<div id="container">
<div id="header"> este es para el encabezado
<table>
</table>
</div>
<div id="content">este es para el contenido de la tabla
<table>
</table>
</div>
</div>
</body>
</html>
<script>
addSyncScroll(document.getElementById("header"),do cument.getElementById("content"));
</script>
Gracias
