HTML Table exceeds the width assigned to it

Question

HTML Table exceeds the width assigned to it

Navigation

#1 by (1 votes)

1

I have the following code:

<table class="TblReporte" border="1" cellSpacing="1" cellPadding="2" align="center">
    <tr>
        <td align="center">RETIRO</td>
        <td colspan="2" align="center">CAJA GENERAL</td>
        <td colspan="2" align="center">RETIRO SUCURSAL</td>
    </tr>
    <tr>
        <td border="1">NOMBRE DEL CLIENTE</td>
        <td border="1">OPERACIONES</td>
        <td border="1">MONTO</td>
        <td border="1">OPERACIONES</td>
        <td border="1">MONTO</td>
        <td border="1">COMENTARIO O JUSTIFICANTE</td>
    </tr>
</table>

Columns charge them by Database , in the comments column I need to add a lot of information but, when doing so, the table expands too much, causing a ScrollBar to appear, for example:

I need something like this:

html

asked by ARR 12.07.2018 в 19:30

source

1 answer

Email to external domains I have 2 variables in my controller but only one pulls me

score 1 · Accepted Answer

Defining the width of the cell at 1px keeps the width of the column

table {max-width:99.5%;}
td {
  width: 1px
}

<table class="TblReporte" border="1" cellSpacing="1" cellPadding="2" align="center">
  <tr>
    <td align="center">RETIRO</td>
    <td colspan="2" align="center">CAJA GENERAL</td>
    <td colspan="2" align="center">RETIRO SUCURSAL</td>
  </tr>
  <tr>
    <td border="1">NOMBRE DEL CLIENTE</td>
    <td border="1">OPERACIONES</td>
    <td border="1">MONTO</td>
    <td border="1">OPERACIONES</td>
    <td border="1">MONTO</td>
    <td border="1">COMENTARIO O JUSTIFICANTE</td>
  </tr>
</table>

Although it would be advisable to use minimum and maximum widths to have better control

table {max-width:99.5%;}
td {
font-size :12px;
  width: 1px;
}

.anchocontrolado {
  min-width: 220px;
  max-width: 250px
}

<table class="TblReporte" border="1" cellSpacing="1" cellPadding="2" align="center">
  <tr>
    <td align="center">RETIRO</td>
    <td colspan="2" align="center">CAJA GENERAL</td>
    <td colspan="2" align="center">RETIRO SUCURSAL</td>
  </tr>
  <tr>
    <td border="1">NOMBRE DEL CLIENTE</td>
    <td border="1">OPERACIONES</td>
    <td border="1">MONTO</td>
    <td border="1">OPERACIONES</td>
    <td border="1">MONTO</td>
    <td border="1" class="anchocontrolado">COMENTARIO O JUSTIFICANTE</td>
  </tr>
  <tr>
    <td border="1">blablablabla</td>
    <td border="1">blablabla</td>
    <td border="1">blabla blablabla bla blablablabla bla</td>
    <td border="1">blablablabla</td>
    <td border="1">bla</td>
    <td border="1" class="anchocontrolado">Mínimo</td>
  </tr>
  <tr>
    <td border="1">blablablabla</td>
    <td border="1">blablabla</td>
    <td border="1">blabla</td>
    <td border="1">blablablabla</td>
    <td border="1">bla</td>
    <td border="1" class="anchocontrolado">Activa Máximo blablabla bla blablablabla bla blablablabla bla blablablabla bla blablablabla</td>
  </tr>
</table>