0

Tengo lo siguiente

.contenedor {
  width: 900px;
  margin: auto;
}

.bg-logo {
  background: #4a4045;
  height: 60px;
  padding: 14px 0 0 50px;
}

#opciones {
  background: #6b6063;
}

ul {
  list-style-type: none;
  margin: 1;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #ea1c2c;
}

.active {
  background-color: #6b6063;
}

button:hover {
  background: rgba(0, 0, 0, 0);
  color: #3a7999;
  box-shadow: inset 0 0 0 3px #3a7999;
}

#fondo {
  width: 900px;
  height: 200px;
  background-image: url('../Imagenes/fondo.png');
}

table {
  width: 900px;
  margin: auto;
  border-collapse: collapse;
}

tr:nth-of-type(odd) {
  background: #eee;
}

th {
  background: #333;
  color: white;
  font-weight: bold;
}

td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}
<!DOCTYPE html>
<html>

<head>
  <title>2019</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/Estilo.css">
</head>

<body>
  <div class="contenedor">
    <div class="bg-logo">
      <img src="Imagenes/Logotipo.png">
    </div>
    <table>
      <tr>
        <th rowSpan="2">TERRITORIO</th>
        <th rowSpan="2">ESQUEMA</th>
        <th colspan="2">2016</th>
        <th colspan="2">2017</th>
        <th colspan="2">2018</th>
        <th colspan="2">2019</th>
        <th colspan="2">Var % 16-17</th>
        <th colspan="2">Var % 17-18</th>
        <th colspan="2">Var Abs 18-19</th>
        <th colspan="2">Var % 18-19</th>
      </tr>
      <tr>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
      </tr>
    </table>
  </div>
</body>

</html>

Mi tiene width: 900px pero, la tabla lo sobrepasa, saben como puedo ajustar la tabla al tamaño del

2
  • Sigue sin funcionar
    – ARR
    Commented el 14 sept. 2018 a las 16:36
  • Muchas veces el % no lo respeta el navegador, prueba poniendo px en lugar de % y dale un margin: auto; para centrar. Commented el 14 sept. 2018 a las 16:42

4 respuestas 4

2

El total de información que presenta la tabla en la cabecera que es mas de 900px esta superando el ancho de la clase .contenedor.

Lo que hice fue encerrrar a la tabla dentro de un div y agregarle style="overflow:auto; width: 950px".

Quizá eso te sirva

.contenedor {
  width: 900px;
  margin: auto;
}

.bg-logo {
  background: #4a4045;
  height: 60px;
  padding: 14px 0 0 50px;
  width:900px
}

#opciones {
  background: #6b6063;
}

ul {
  list-style-type: none;
  margin: 1;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #ea1c2c;
}

.active {
  background-color: #6b6063;
}

button:hover {
  background: rgba(0, 0, 0, 0);
  color: #3a7999;
  box-shadow: inset 0 0 0 3px #3a7999;
}

#fondo {
  width: 100%;
  height: 200px;
  background-image: url('../Imagenes/fondo.png');
}

table {
  width: 900px;
  margin: auto;
  border-collapse: collapse;
}

tr:nth-of-type(odd) {
  background: #eee;
}

th {
  background: #333;
  color: white;
  font-weight: bold;
}

td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}
<!DOCTYPE html>
<html>

<head>
  <title>2019</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/Estilo.css">
</head>

<body>
  <div class="contenedor">
    <div class="bg-logo">
      <img src="Imagenes/Logotipo.png">
    </div>
<div style="overflow:auto; width: 950px">
    <table>
      <tr>
        <th rowSpan="2">TERRITORIO</th>
        <th rowSpan="2">ESQUEMA</th>
        <th colspan="2">2016</th>
        <th colspan="2">2017</th>
        <th colspan="2">2018</th>
        <th colspan="2">2019</th>
        <th colspan="2">Var % 16-17</th>
        <th colspan="2">Var % 17-18</th>
        <th colspan="2">Var Abs 18-19</th>
        <th colspan="2">Var % 18-19</th>
      </tr>
      <tr>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
        <th>NO</th>
        <th>MONTO</th>
      </tr>
    </table>
</div>
  </div>
</body>

</html>

1

Probé tu código cambiando el tamaño de las letras de la tabla. Lo dejé así.

table {
  font-size: 12px;
  width: 900px;
  margin: auto;
  border-collapse: collapse;
}

introducir la descripción de la imagen aquí

Lo que sucede es que el tamaño de las letras de la table toman el valor por defecto del navegador si tu no especificas el que quieres. Espero haberte ayudado.

1

Con esto debería funcionar:

table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
}

El problema es que el contenido de tu tabla es muy grande para 900px. Prueba como se ve cambiando el width: 900px; de tu contenedor por min-width: 900px; y veráz como se acomoda. Ya después revisa tus paddings y tamaño de fuente, son muy grandes para el poco espacio que tienes.

introducir la descripción de la imagen aquí

0

en tu css, debería quedar así

table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
}

el 100% se refiere a que ocupara todo el ancho disponible, y quien marca este limite es el ancho del contenedor (div)

1
  • Sigue sin funcionar
    – ARR
    Commented el 14 sept. 2018 a las 16:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.