PHP - Ayuda con autoajustar resolucion

 
Vista:
sin imagen de perfil
Val: 51
Ha aumentado su posición en 3 puestos en PHP (en relación al último mes)
Gráfica de PHP

Ayuda con autoajustar resolucion

Publicado por Javier (30 intervenciones) el 22/01/2019 20:35:44
Buenas tardes amigos necesito nuevamente de su ayuda estoy tratando de autoajustar un ejemplo de tabla para cualquier resolucion en css pero se distorciona varios elementos, les agradezco su orientacion este es el codigo

aqui el css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
body {
    width:100%;
    height:100%;
}
.contenedor_categ {
    width: 57%;
    height: 500px;
    top: 35%;
    left: 20%;
    margin-top: 1.2%;
    margin-left: 7%;
    position: static;
    z-index: 0;
    border: 1px solid #999;
    border-radius: 6px;
}
.tabla_categ {
    width: 96%;
	font-size: 110%;
    border: 0px solid #999;
    text-align: left;
    border-collapse: collapse;
    margin-left: 1.5%;
}
.tabla_categ thead tr {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    background-color: #d3e3fd;
    height: 40px;
}
.tabla_categ thead tr th {
    width: 30%;
    padding-left: 1.9%;
}
.tabla_categ thead tr th + th {
    width: 42%;
}
.tabla_categ thead tr th + th + th {
    width: 18%;
}
.tabla_categ thead tr th + th + th + th {
     text-align: center;
}
.tabla_categ tbody tr {
    border-bottom: 1px solid #999;
    height: 40px;
}
.tabla_categ tbody tr td {
    width: 30%;
    padding-left: 1.9%;
}
.tabla_categ tbody tr td + td {
    width: 42%;
}
.tabla_categ tbody tr td + td + td {
    width: 18%;
}
.tabla_categ tbody tr td + td + td + td {
    text-align: center;
}

aqui el codigo html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="gencyolcu" />
    <link rel="stylesheet" href="css/ojo.css" />
	<title>Untitled 1</title>
</head>
<body>
    <div class="contenedor_categ">
        <br />
        <table class="tabla_categ" id="tabla_categ">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Descripci&oacuten</th>
                    <th>Agregado al</th>
                    <th>Acci&oacuten</th>
                </tr>
            </thead>
            <tbody id="cuerpo_tabla">
                <tr>
                    <td>uno</td>
                    <td>dos</td>
                    <td>tres</td>
                    <td>cuatro</td>
                </tr>
            </body>
        </table>
    </div>
</body>
</html>

mil gracias de antemano amigos...
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Kathyu
Val: 1.802
Plata
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Ayuda con autoajustar resolucion

Publicado por Kathyu (905 intervenciones) el 23/01/2019 15:53:28
Suba ejemplos del resultado (imágenes) y es CSS puro, BS, Plex o que ?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 51
Ha aumentado su posición en 3 puestos en PHP (en relación al último mes)
Gráfica de PHP

Ayuda con autoajustar resolucion

Publicado por Javier (30 intervenciones) el 24/01/2019 16:41:35
Buen dia Kathyu si es puro CSS con html tal y como le deje descrito en la publicacion...

estas son las imagenes la primera es la resolucion original y las otras dos son donde se distorcionan...


1920
reducion-1
reducion-2

Agradezco tu orientacion amiga
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Xavi
Val: 1.009
Bronce
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Ayuda con autoajustar resolucion

Publicado por Xavi (143 intervenciones) el 25/01/2019 08:45:04
Hola Javier, exactamente que querries que hiciera tu código cuando no tiene espacio suficiente?

Al utilizar una tabla, no puedes mover columnas debajo por lo que lo unico que puedes hacer al juntar, es eliminar alguna de las columnas de la tabla.
Si lo hicieras con elementos como <div>, puedes mover filas a la linea de abajo cuando no cabe por anchura.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 51
Ha aumentado su posición en 3 puestos en PHP (en relación al último mes)
Gráfica de PHP

Ayuda con autoajustar resolucion

Publicado por Javier (30 intervenciones) el 28/01/2019 15:36:14
buen dia amigo Xavi exactamente lo que necesito es que al cambiar de resolucion automaticamente se ajuste a la resolucion y no se desacomode la tabla porque la resolucion sea mas grande o mas pequeña ..necesito de su orientacion pariente agradecido de antemano
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Xavi
Val: 1.009
Bronce
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Ayuda con autoajustar resolucion

Publicado por Xavi (143 intervenciones) el 28/01/2019 18:57:36
Para ello, re recomiendo utilizar <div> en vez de <table>... luego con estilos, puedes indicar que se pongan de lado, y si la pantalla se hace pequeña, puedes indicar que se pongan debajo... incluso puedes indicar que hacer a cualquier resolución con los estilos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 51
Ha aumentado su posición en 3 puestos en PHP (en relación al último mes)
Gráfica de PHP

Ayuda con autoajustar resolucion

Publicado por Javier (30 intervenciones) el 28/01/2019 20:36:21
umm ok amigo grcias por la recomendacion voy a probarlo y te aviso ..gracias nuevamente pariente
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar