La mesa de respuesta con un borde ha sido diseñada. El problema es el ajuste de texto, incluso cuando se incluye th.nowrap en css, donde los datos se superponen y aparecen dos líneas horizontales cuando th.nowrap la vista móvil.
Había declarado el texto ahora en formato css e incluso td y th pero no funciona.
¿Cómo puedo resolver este error de texto envuelto?
table { width: 100%; white-space: nowrap; } thead, tbody, tr, td, th { display: block; } tr:after { content: ' '; display: block; visibility: hidden; clear: both; white-space: nowrap; } thead th { height: 40px; white-space: nowrap; /*text-align: left;*/ } tbody { height: 40px; overflow-y: auto; white-space: nowrap; } thead { /* fallback */ } tbody td, thead th { width: 19.2%; float: left; white-space: nowrap; }
Creo que esto es lo que querías. nowrap todo el código de nowrap , ya que no lo necesitabas para lograr responsive layout .
La clave aquí es dar a las tablas parent position:relative; elemento parent position:relative; , float:left; y una anchura de width:100%; así el width:100%; la mesa width:100%; tiene un significado (100% de qué?).
Tampoco es necesario dar un width cada columna. Es suficiente para proporcionar anchos para one row y el rest de la table usará those rules .
Había un
dentro de la tabla que quité encima de la tabla.
Aquí está el código: (ejecute el fragmento)
Nota: los bordes en el th están ahí solo para mostrar el width of each . También cambié el width de la widest column del 18% al 14% y le di el 4% a las dos últimas columnas ( 2% each ).
.table-responsive { position:relative; float:left; width:100%; } table { width: 100%; } th { color:grey; border:1px solid #000; } td { text-align:right; }
Se Enq Da Bu Prop Pr District City Bedrooms Details Update Det ed
Por favor use este código
Panel heading Some default panel content here.
# First Name Last Name Username 1 Test Test Test
Por favor use el código de abajo
Se Enq Da Bu Prop Pr District City Bedrooms Details Update Det ed