Foros del Web » Creando para Internet » CSS »

tabla con width:100%, display:block, overflow-y:auto

Estas en el tema de tabla con width:100%, display:block, overflow-y:auto en el foro de CSS en Foros del Web. Hola a todos y gracias por la ayuda. El problema que tengo es que imprimo una tabla desde php, y cuando imprimo contenido dentro del ...
  #1 (permalink)  
Antiguo 04/12/2014, 04:03
Avatar de adrirs11  
Fecha de Ingreso: diciembre-2012
Ubicación: BCN
Mensajes: 107
Antigüedad: 11 años, 2 meses
Puntos: 1
tabla con width:100%, display:block, overflow-y:auto

Hola a todos y gracias por la ayuda.

El problema que tengo es que imprimo una tabla desde php, y cuando imprimo contenido dentro del <tbody> y le doy la propiedad display:block; y overflow-y:auto; me encoge el contenido..y lo que quiero es que quede alineado con las columnas del <thead>.

Si no pongo display: block se ensancha pero no hace scroll, y el scroll es indispensable ya que necesito que me respete la altura. Dejo el código:

Código:
//Función encargada de crear la tabla con los resultados
function CrearTabla($datos){
    
    $bck= "";
    
    $html = '<table id="tablaResultados" style="background: #e7e7e7; text-align:center; height: 540px;" width="100%" cellpadding="5";>';
    $html .= '<thead style="display: block;">';
    
    $html .= '<tr style="background:#006699;"><td style="width: 52px; border-top-left-radius: 5px; background: #006699;"><img title="Volver atrás" style="cursor: pointer;" onclick="Refrescar()" src="images/back_white_arrow.png"></td><td colspan="4" style="border-top-right-radius: 3px;"><h3 style="color:#ffffff;">Resultados de búsqueda</h3></td></tr>';
    $html .= '<tr style="background:#006699; width:100%; color:#ffffff; font-weight:bold;">';
    
    $html .= '<td style="width:4%;">Descargar</td>';
    $html .= '<td style="width:32%;">Numero de certificado</td>';
    $html .= '<td style="width:32%;">Fecha de calibracion</td>';
    $html .= '<td style="width:32%;">Patrones</td>';
    
    $html .= '</tr>';
    
    $html .= '</thead>';
    $html .= '<tbody style="overflow-y: auto; display: block; height:475px; margin-top:2px; margin-bottom:2px; table-layout:fixed;">';
    
    for ($i = 0; $i < count($datos); $i++) {
        
        if ($i%2 == 0){
            $bck = '#ffffff';
        }else{
            $bck = '#ecf2f6';
        }
        
        $html .= '<tr style="background:'.$bck.';">';

        $html .= '<td><input type="checkbox" name="cbox'.$i.'" value="seleccioncbox3" id="cbox'.$i.'" onchange="checkboxChanged(this)"></td>';
        $html .= '<td>'.$datos[3].'/'.$datos[4].'</td>';
        $html .= '<td>'.$datos[41].'</td>';
        $html .= '<td>'.$datos[20].'</td>';
        
        $html .= '</tr>';
    }
    $html .= '</tbody>';
    $html .= '<tfoot style="display:table-footer-group;">';
    $html .= '<tr style="background:#006699; height:40px;"><td colspan="4" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;"></td></tr>';
    $html .= '</tfoot>';
    $html .= '</table>';
    
    return $html;
}


Gracias de nuevo.
  #2 (permalink)  
Antiguo 04/12/2014, 14:29
Avatar de fullmental  
Fecha de Ingreso: octubre-2004
Ubicación: México DF, Xochimilco
Mensajes: 593
Antigüedad: 19 años, 5 meses
Puntos: 3
Respuesta: tabla con width:100%, display:block, overflow-y:auto

Para una ayuda mas concreta sería mejor ver un ejemplo en línea.

Por la descripción parece ser que sólo lo siguiente

style="overflow-y: auto; width: 100%; height:475px; margin-top:2px; margin-bottom:2px; table-layout:fixed;"
  #3 (permalink)  
Antiguo 05/12/2014, 02:35
Avatar de adrirs11  
Fecha de Ingreso: diciembre-2012
Ubicación: BCN
Mensajes: 107
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: tabla con width:100%, display:block, overflow-y:auto

Exacto fullmental, es exactamente esa linea, pero he puesto todo el código porque quizás alguna propiedad de la tabla me este dando el problema..

Etiquetas: background, color, html, php, tabla, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:16.