Home / Questions / 362545
Accepted
Juan Cabello
Asked: 2020-06-05 21:08:54 +0800 CST 2020-06-05 21:08:54 +0800 CST

How do I prevent this from happening to me in the html table?

  • 772

I have a table where it shows me the data of a user but the mail column collides with the category column. How can I make the table fit?enter image description here

Here I leave the html code of the table, it is inside a form but I don't think it has that much relevance. What I am interested in knowing is how I avoid that ugly thing above, if there is a solution with css, with bootstrap, etc. Thank you

<table class="table table-striped table-bordered table-hover" >
            <thead class="thead-dark" >
                <tr>       
                    <th>cedula</th>
                    <th>Nombre</th>
                    <th>apellido</th>
                    <th>Fecha Del Aporte</th>
                    <th>Aporte Asociado</th>
                    <th>Fecha Aporte del Asociado</th>
                    <th>Aporte Patrono</th>
                    <th>Fecha Aporte del Patrono</th>
                    <th>Monto total</th>
                    <th>Estado</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> <?php echo $cedula ?> </td>
                    <td> <?php echo $nombre ?> </td>
                    <td> <?php echo $apellido ?> </td>
                    <td><input type="date" class="form-control" name="fechaAporte" placeholder="Fecha del Aporte" value="<?php echo $fechaAporte; ?>"></td>
                    <td><input type="number" class="form-control" name="aporteAsociado" placeholder="Fecha del Pago" value="<?php echo $aporteAsociado; ?>"></td>
                    <td><input type="date" class="form-control" name="fechaPagoAsociado" placeholder="Monto del Aporte" value="<?php echo $fechaPagoAsociado; ?>"></td>
                    <td><input type="number" class="form-control" name="aportePatrono" placeholder="Tipo de Aporte" value="<?php echo $aportePatrono; ?>"></td>
                    <td><input type="date" class="form-control" name="fechaAportePatrono" placeholder="Estado del aporte" value="<?php echo $fechaAportePatrono; ?>"></td>
                    <td><input type="number" class="form-control" name="montoAporte" placeholder="Estado del aporte" value="<?php echo $montoAporte; ?>"></td>
                    <td><input type="number" class="form-control" name="estado" placeholder="Estado del aporte" value="<?php echo $estado; ?>"></td>


                <tr>

            </tbody>
        </table>
        <br>


        <button type="submit" class="btn btn-primary" name="btnGuardar">Guardar Cambios</button>
html

3 Answers

  1. Best Answer

    As you've already said, a text like [email protected]will always overflow if its container isn't flexible or wide enough.

    In each cell you can use:

    overflow: hidden;
text-overflow: ellipsis;

    That way, the text won't overflow its container, plus 3 dots will be added to the end, and it will look like this estecorreoesmuy....

    On the other hand, if you want to always display the full email, you could insert the <wbr>. More information here This tag will create line breaks when given the opportunity, in the position you put it. Example: estecorreoesmuylargo<wbr>@gmail.com. You should still test how it works.

    • 4

  2. An email address like: [email protected]is considered a single word, and will take up that auto width, with no line breaks.

    I suggest that you only display part of the email address in the table (eg the first 10 characters), and use the attribute titleto display the full address on hover.

    <td title="<?php echo $email; ?>"> 
    <?php echo strlen($email) > 10 ? substr($email, 0, 10) . '...' : $email; ?> 
</td>
    • 2

  3. put a style to each <td>:overflow: hidden

    You will prevent the text from mounting.

    • 0