0

Buenas tengo un problema de css en una tabla bootstrap cuando lleno con varios caracteres la columna Diagnostico las columnas son fechas se hacen mas pequeñas por lo que muestran las fechas cortadas nesecito que las columnas con fecha queden de forma estatica sin que se encojan para que su fecha siempre se muestre bienintroducir la descripción de la imagen aquí, este es el codigo.

 <table id="userss" class="table table-striped table-bordered table condensed table-hover table-responsive " >
            <thead>

        <th>Id</th>
        <th >Dias</th>
        <th>A/P Fecha</th>
        <th>Fecha Cumple</th>
        <th>Diagnostico/Observaciones</th>
        <th>Medico</th>
        <th>Tipo</th>
        <th>Acciones</th>


            </thead>







     </table>

2 respuestas 2

2

Por lo que veo utilizas DataTables. Existe una opción específica que es columns.width que puedes utilizar de la siguiente forma:

$('#mi-tabla').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 },
    { "width": "60%", "targets": 1 },
    { "width": "20%", "targets": 2 }
  ]
} );

Ahí puedes especificar el ancho de cada columna.

-1

Aplicandole un width fijo con css se puede lograr:

.table th.fixed-width {
    min-width: 80px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />


<table id="userss" class="table table-striped table-bordered table condensed table-hover table-responsive " >
       <thead>
        <th>Id</th>
        <th>Dias</th>
        <th class="fixed-width">A/P Fecha</th>
        <th class="fixed-width">Fecha Cumple</th>
        <th>Diagnostico/Observaciones</th>
        <th Medico</th>
        <th>Tipo</th>
        <th>Acciones</th>
      </thead>
  <tbody>
    <td>
      22
    </td>
    <td>
      12
    </td>
    <td>
      12-12-1555
    </td>
    <td>
      12-12-1555
    </td>
    <td>
      adsfasdfasdlfasd;klfj askdljf al;skdjf la;skdjf ;lkasdfj;alksdjf klasdjfl;kasdjf;lak sdjfasjflaskdjf ;slkdjfas;lkdjf
    </td>
    <td></td>
    <td></td>
    <td></td>
    
  </tbody>
     </table>
  
</body>
</html>

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.