how to adjust the contents of a cell, which occupies the entire cell

0

I want what is inside the cell to fit the content or that the content fits into the cell

I send you the image of how it is:

as you see the tto1linea image does not occupy the entire cell, when I change the size of this image, it gets smaller but there is more space in the cell and I want it to fit

my code:

<table class="table table-hover"  id="pacientes" >
          <tr>   
              <th rowspan="2" style="text-align:center;">N°</th>
            <th rowspan="2" style="text-align:center;">E. TRATAMIENTO</th>
              <th rowspan="2" style="text-align:center;">N. DE CASO</th>
              <th rowspan="2" style="text-align:center;">F. INICIO</th>    
              <th rowspan="2" style="text-align:center;">DNI</th>
              <th rowspan="2" style="text-align:center;">NOMBRE</th>
              <th rowspan="2" style="text-align:center;">HUELLA</th>
            <th rowspan="2" style="text-align:center;">FACTORES</th>
            <th rowspan="2" style="text-align:center;">FASE</th>
            <th rowspan="2" style="text-align:center;">MES TTO</th>
              <th rowspan="2" colspan="2" style="text-align:center;">AMPLIACION</th>
            <th rowspan="2" align="center" ></th>
          </tr>
          <tr></tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <th colspan="1">INICIO</td>
            <th colspan="1">DOSIS</td>
          </tr>
          <?php 
            $i=1;

            while ($row = $resultado_personas->fetch_array())
            {
              ?>
              <tr>
                <td align="center" ><?php echo $i++; ?></td>
                 <td align="center" style="width: 18%;"><?php if($row['ttratamiento']=="TRATAMIENTO PRIMERA LINEA") { ?> <img src="../img/tt1linea.png" class="img-responsive"   style="width: 75%;" > <?php }else{ ?> <img   src="../img/tt2linea.png" class="img-responsive"  style="width: 75%;" > <?php }; ?></td>
                  <td align="center"><?php echo $row['nro_caso']; ?></td>   
                <td align="center"><?php echo $row['f_inicio']; ?></td>
                  <td align="center"><?php echo $row['dni']; ?></td>

                  <td><?php echo $row['apellidopaterno']." ".$row['apmaterno']." ".$row['nombre']." "; ?><a href="#" class="viw_dat_personal" id="<?php echo $row["dni"]; ?>"><?php if($row['sexo']=='1'){ ?> <i class="fa fa-male fa-2x " aria-hidden="true"></i> <?php }else { ?> <i class="fa fa-female fa-2x" aria-hidden="true" style="
    color: #ff9cae;"></i> <?php  } ?>  </a></td>
                  <td align="center"><?php if($row['dnihu']!==null){ ?> <img src="../img/huella_si.png"> <?php ; } ; ?></td>
                <td class="text-center"> 
                  <?php
                    $factores = "SELECT tif.'Tif_Nombre', tif.'Tif_Icono' FROM factor_riesgo far INNER JOIN tipo_factor tif ON tif.'Tif_IdTipoFactor' = far.'Tif_IdTipoFactor' WHERE cod_det_pac_tra = '".$row['codigodet']."'";

                    $resultado_factores = mysqli_query($conexion, $factores) or mysql_error($conexion);

                    while($fila_factor = $resultado_factores->fetch_array())
                    {
                      ?>
                        <a href="" data-toggle="tooltip" title="<?php echo $fila_factor['Tif_Nombre']?>"><img src="../img/icono/<?php echo $fila_factor['Tif_Icono']?>"></a>
                      <?php
                    }

                  ?>
                </td>
                <td align="center"><?php echo $row['fase']; ?></td>
                <td align="center"><?php echo convertir_mes($row['cantidad_asis']); ?></td>
                  <td colspan="1" align="center"><?php echo  $row['amp_fechini']; ?></td>
                <td colspan="1" align="center"><?php echo $row['cntidad_amp']; ?></td>
                <td colspan="1" align="center">
                   <a href="#"   dni="<?php echo $row['dni']; ?>" for="<?php echo $row["ttratamiento"]; ?>" name="control" id="<?php echo $row["codigodet"]; ?>" class="ctrldata" ><img src="../img/control.png"  alt=""  style="width: 20%; min-width: 20px;"></a>
                  <a href="#"  name="ver" id="<?php echo $row["codigodet"]; ?>" class="viw_data" ><img  id="calendario"  src="../img/calendario.png" style="width: 20%; min-width: 20px;"></a>

                  <?php 
                    if($tipo_usuario != 1) 
                    { 
                      ?>   
                        <a href="#" name="egreso"    id="<?php echo $row["codigodet"]; ?>" class="egreso" ><img id="calendario" src="../img/EGRESO.png" style="width: 20%; min-width: 20px; "  ></a>
                      <?php 
                    }
                    ?>

                    <?php 
                    if($tipo_usuario == 1) 
                    { 
                      ?> 
                       <a class="btn btn-danger btn-md eliminar_resultado" id="<?php echo $row["dni"]; ?>" title="Eliminar"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
                      <?php 
                    }
                  ?> 
                </td>
              </tr>
              <?php
            } 
          ?>
        </table>
    
asked by ingswsm 12.10.2017 в 22:09
source

3 answers

0

In your table you have a structure error that although visually works the same inside the code is an error as such, you are missing the table sections <thead> and <tbody>

<table>
    <thead></thead>
    <tbody></tbody>
</table>

Now for the problem you have with the size of your img and your td you could try the following:

<td style="width: 50px">
    <img src="../img/tt1linea.png" class="img-responsive" style="width: 100%;">
</td>
    
answered by 12.10.2017 в 23:07
0

Applies widths to th

<tr>   
    <th rowspan="2" style="text-align:center; width:5%">N°</th>
    <th rowspan="2" style="text-align:center; width:10%">E. TRATAMIENTO</th>
    <th rowspan="2" style="text-align:center; width:10%">N. DE CASO</th>
    <th rowspan="2" style="text-align:center; width:20%">F. INICIO</th> 
</tr>

You are adjusting the percentages until you get the desired result.

And replace the images with buttons:

<img src="../img/tt1linea.png" class="img-responsive"   style="width: 75%;" >
<img src="../img/tt2linea.png" class="img-responsive"   style="width: 75%;" >

Example Bootstrap buttons:

<button class="btn btn-block btn-success">TTO 1 LÍNEA</button>
<button class="btn btn-block btn-danger">TTO 2 LÍNEA</button>
    
answered by 19.06.2018 в 15:21
0

Give more width to the date cell since that is the culprit that the whole row has more height because the date occupies two lines, give it more width and with that you solve it

    
answered by 19.06.2018 в 10:53