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
    el 14 sep. 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. el 14 sep. 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
    el 14 sep. 2018 a las 16:47

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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