Foros del Web - Ver Mensaje Individual - [AYUDA]Problema ocultar/mostrar celda de una tabla sin que se descoloque el contenido

emprear · #7 (**permalink**) 28/10/2012, 11:43

Cita:

Iniciado por furoya

Perdón. Nos tenemos que poner de acuerdo para postear.

Yo pensba, además, que podría usar table-row o table-row-group para hacer visible esa parte de la tabla.

No le quise decir nada por los errores de JS y HTML, porque me amargaba la mañana.

Recién le posteo a otro que se "olvidó" de decir que tenía un reset CSS y pretendía que lo adivináramos.

Los domingos están peor que de costumbre...

Usted está en todas maestro.

Igual me parece que algo anda mal en esto, hice esta versión mejorada

Código HTML:

Ver original<!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" />
<title>Documento sin t&iacute;tulo</title>
 
<style type="text/css">
/*<![CDATA[*/
 
#a1, #a2{
display: none;
margin: 0;
}
 
table#principal{
empty-cells: hide;
border-collapse: separate;
}
 
button{
width: 90%;
}
 
td.np{
padding: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function ShowHide(rowId,b) {
 if ((document.getElementById(rowId).style.display) == 'block') {
  document.getElementById(rowId).style.display = 'none';
 b.innerHTML = 'Ver Grupos';
 }
 else {
  document.getElementById(rowId).style.display = 'block';
  b.innerHTML = 'Ocultar Grupos';
 }
}
//]]>
</script>
</head>
 
<body>
<table width="50%" border="1" cellspacing="1" cellpadding="2" id="principal">
  <tr bgcolor="#999966">
    <th align="center">ID</th>
    <th align="center">DNI</th>
    <th align="center">Nombre</th>
    <th align="center">Email</th>
    <th align="center">&nbsp;</th>
  </tr>
  <tr>
    <td align="center">id1</td>
    <td align="center">dni1</td>
    <td align="center">Nombre_1</td>
    <td align="center">Email_1</td>
    <td align="center"><button onclick="ShowHide('a1',this)">Ver Grupos</button></td>
  </tr>
  <tr>
    <td colspan="5" align="center" class="np">
        <table border="1" cellpadding="2" cellspacing="1" id="a1">
      <tr>
        <th colspan="4">TABLA 1 </th>
        </tr>
      <tr>
        <td>ASDAD</td>
        <td>ASDAD</td>
        <td>ASDAD</td>
        <td>ASDAD</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center">id2</td>
    <td align="center">dni2</td>
    <td align="center">Nombre_2</td>
    <td align="center">Email_2</td>
    <td align="center"><button onclick="ShowHide('a2',this)">Ver Grupos</button></td>
  </tr>
  <tr align="center">
    <td colspan="5" class="np">
        <table border="1" cellpadding="2" cellspacing="1" id="a2">
      <tr>
        <th colspan="4">TABLA 1 </th>
      </tr>
      <tr>
        <td>ASDAD</td>
        <td>ASDAD</td>
        <td>ASDAD</td>
        <td>ASDAD</td>
      </tr>
    </table></td>
  </tr>
</table>
 
</body>
</html>

y en chrome sigue el problema, se pierde el centrado de la tabla que se oculta/muestra
Cre oque es cosa de empezarla de 0 y buscar otro camino

SAludos