1

Tengo un problema, que por más simple que pueda llegar a ser, no logro (creo yo) encontrar la forma correcta de formular la pregunta en Google o aquí en Stack, para encontrar la solución que necesito.

Tengo el siguiente código para una tabla:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>OPERAR CON PROVEEDORES</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12 table-responsive">
          <table class="table table-hover table-condensed" border="0">
            <thead>
              <tr>
                <th scope="col">ID</th>
                <th scope="col">Nombre</th>
                <th scope="col">CUIT</th>
                <th scope="col">IVA</th>
                <th scope="col">Dirección</th>
                <th scope="col">Número</th>
                <th scope="col">Piso</th>
                <th scope="col">Puerta</th>
                <th scope="col">Ciudad</th>
                <th scope="col">Provincia</th>
                <th scope="col">Código Postal</th>
                <th scope="col">Pais</th>
                <th scope="col">Teléfono</th>
                <th scope="col">Mail</th>
                <th scope="col">Edición</th>
              </tr>
            </thead>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

El problema es que la información contenida en las celdas hace un salto cuando son dos o más palabras y hay un espacio entre ellas. Por ejemplo, en <th>Código Postal</th>, la palabra "Código" aparece arriba, y "Postal" aparece debajo, en la misma celda. La idea es que aparezcan una al lado de la otra.

EDIT1: Por otro lado, la tabla me queda demasiado larga y excede el ancho de la pantalla. Quisiera que la tabla, genere una barra de desplazamiento horizontal y poder leer toda la tabla, y no exceda el ancho de la pantalla. Espero se entienda. Gracias!

4
  • 1
    El problema es que ese elemento al ser responsive siempre 'partirá' las palabras cuando consiga un espacio. Puedes reemplazar el espacio por un &nbsp;. Tu elemento quedaría así: <th scope="col">Código&nbsp;Postal</th>. Prueba y comentas. Saludos Commented el 19 abr. 2019 a las 16:12
  • Hola!, gracias por tu respuesta. Efectivamente, funciona. El problema es que los otros datos contenidos en las demás celdas van a provenir de una base de datos cuyos textos tienen espacios, por lo que sucede lo mismo. Saludos! Commented el 19 abr. 2019 a las 16:44
  • 1
    Jejeje, gracias. Soy muy old school, imagino tu cara: ¿&nbsp;? ¿wtf?. Aún me estoy riendo. XD Commented el 19 abr. 2019 a las 20:13
  • jajaj para nada! de hecho lo uso en un par de lugares en mis páginas, sobre todo en algunos <label> que no quiero que tengan nada escrito, pero que necesito que me reconozcan que hay un espacio. Gracias por tu aporte!! Commented el 19 abr. 2019 a las 20:43

2 respuestas 2

4

Puedes utilizar CSS, con la propiedad white-space y el atributo nowrap. Esta propiedad determina como se va a manejar los espacios en blanco dentro de un elemento. Puedes ver más información en el MDN de Mozilla.


Para que aparezca la barra horizontal en tu tabla, debes de poner la clase .table-responsive sobre la etiqueta table, y no sobre el contenedor div.col-md-12 por que si no, el contenedor va a heredar todas las propiedades de .table-responsive. Hice la modificación en el código.

th{
  white-space:nowrap;
}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>OPERAR CON PROVEEDORES</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
          <table class="table table-hover  table-responsive table-condensed" border="0">
            <thead>
              <tr>
                <th scope="col">ID</th>
                <th scope="col">Nombre</th>
                <th scope="col">CUIT</th>
                <th scope="col">IVA</th>
                <th scope="col">Dirección</th>
                <th scope="col">Número</th>
                <th scope="col">Piso</th>
                <th scope="col">Puerta</th>
                <th scope="col">Ciudad</th>
                <th scope="col">Provincia</th>
                <th scope="col">Código Postal</th>
                <th scope="col">Pais</th>
                <th scope="col">Teléfono</th>
                <th scope="col">Mail</th>
                <th scope="col">Edición</th>
              </tr>
            </thead>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

8
  • Gracias! he añadido un archivo css con table{white-space: nowrap;} y funcionó. de todas maneras, la tabla ahora me queda más grande que la pantalla. Alguna sugerencia para que la tabla, por mas ancha que sea, genere la barra de desplazamiento? Commented el 19 abr. 2019 a las 16:58
  • ¿Podrías actualizar tu pregunta con esto que estas pidiendo? Por favor. @JoseManuelBorras
    – Hoose
    Commented el 19 abr. 2019 a las 17:09
  • Ya edité la pregunta, espero que se entienda y esté bien la edición. Gracias! @Hoose Commented el 19 abr. 2019 a las 17:38
  • 1
    ¿No te aparece la barra horizontal? Con la clase .table-responsive, debería de aparecerte. @JoseManuelBorras
    – Hoose
    Commented el 19 abr. 2019 a las 19:30
  • Me aparece cuando achico el navegador, y la barra de desplazamiento aparece en la tabla, pero cuando lo tengo maximizado, la tabla se agranda hasta más allá del límite, y la barra horizontal me la da el navegador. La idea es que el scrool lo tenga en la tabla. Gracias nuevamente. @Hoose Commented el 19 abr. 2019 a las 20:39
0

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>OPERAR CON PROVEEDORES</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12 table-responsive">
          <table class="table table-hover table-condensed" border="0">
            <thead>
              <tr>
                <th scope="col">name of the project</th>
                <th scope="col">description</th>
                <th scope="col">topic</th>
              
              </tr>
            </thead>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 5 jun. a las 8:12

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.