Snap HTML Table Automatically [closed]

Question

Snap HTML Table Automatically [closed]

Navigation

#1 by (1 votes)

0

I would like to know how to make a table of html format when information is added is adjusted automatically so it fits into the cells. This is the code I'm doing:

<table align="center" border="1" style="width:auto; height:20px;" class="table table-condensed table-bordered table-hover">
  <tr align="center" class="active">
    <td width="80">CÓDIGO</td>
    <td width="80">NOMBRE</td>
    <td width="150">APELLIDOS</td>
    <td width="80">DNI</td>
    <td width="250">FECHA DE NACIMIENTO</td>
    <td width="80">EDAD</td>
    <td width="80">SEXO</td>
    <td width="150">DIRECCIÓN</td>
    <td width="150">CORREO</td>
    <td width="80">TELÉFONO</td>
    <td width="80">ESPECIALIDAD</td>
    <td width="50">HORA(DESDE)</td>
    <td width="50">HORA(HASTA)</td>
    <td width="250">FECHA DE REGISTRO</td>
    <td>ACCIONES</td>
  </tr>
  <tr align="center">
    <td>1</td>
    <td>Ricardo</td>
    <td>Torres Torres</td>
    <td>12345678</td>
    <td>1980-02-12</td>
    <td>12</td>
    <td>Masculino</td>
    <td>Av. Los Alisos</td>
    <td>[email protected]</td>
    <td>5213652</td>
    <td>Cardiologia</td>
    <td>06:00</td>
    <td>14:00</td>
    <td>2016-02-18</td>
    <td></td>
  </tr>
</table>

html html-tabla

asked by Bruno 24.11.2016 в 01:57

source

1 answer

Android App with Retrofit consuming of api does not show the list Error when wanting to pass a gridview to an excel file

score 1 · Answer 1

In the code that you have sent, you have classes that are not defined in the css here:

<table align="center" border="1" style="width:auto; height:20px;" class="table table-condensed table-bordered table-hover">

Those classes that you have added to the element have no effect if you do not mention them in the CSS.

You also have this wrong in all its cases:

<td width="80">ESPECIALIDAD</td>

This has no effect on the table.

Here I have made a simple example of what I more or less think you intend to do:

<html>
    <head>
    </head>
        <style>
            table {
                border: none;
                width: 100%;
                border-collapse: collapse;
            }

            td { 
                padding: 5px 10px;
                text-align: center;
                border: 1px solid #999;
            }

            tr:nth-child(1) {
                background: #dedede;
            }
        </style>

<body>

    <table>
            <tr>
                <td>CÓDIGO</td>
                <td>NOMBRE</td>
                <td>APELLIDOS</td>
                <td>DNI</td>
                <td>FECHA DE NACIMIENTO</td>
                <td>EDAD</td>
                <td>SEXO</td>
                <td>DIRECCIÓN</td>
                <td>CORREO</td>
                <td>TELÉFONO</td>
                <td>ESPECIALIDAD</td>
                <td>HORA(DESDE)</td>
                <td>HORA(HASTA)</td>
                <td>FECHA DE REGISTRO</td>
                <td>ACCIONES</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Ricardo</td>
                <td>Torres</td>
                <td>12345678</td>
                <td>1980-02-12</td>
                <td>12</td>
                <td>Masculino</td>
                  <td>Av. Los Alisos</td>
                <td>[email protected]</td>
                <td>5213652</td>
                <td>Cardiologia</td>
                <td>06:00</td>
                <td>14:00</td>
                <td>2016-02-18</td>
                <td></td>
            </tr>
    </table>
</body>
</html>

In this way, you have a slight margin added to the cells so that the text does not stick to the edges, add the text you add, the cell will adapt to it.

Inside the <style> tag, you will see tr:nth-child(1) { background: #dedede; } , this is simply to add a different style only to the first row.

I hope it has helped you.