¿Cómo eliminar el texto superpuesto en la tabla?

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?

 

Se
Enq Da Bu Prop Pr District City Bedrooms Details Update
Det ed
 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