para name metadatos keywords etiquetas etiqueta ejemplos buscadores html css table

html - name - Fila de la mesa que no se expande al ancho completo



metadatos html para buscadores (2)

Tengo una tabla y cuando la coloco en un ancho del 100% y las filas de la tabla en un ancho pf 100% no pasa nada o cambia el ancho.

.Table-Normal { position: relative; display: block; margin: 10px auto; padding: 0; width: 100%; height: auto; border-collapse: collapse; text-align: center; } .Table-Normal thead tr { background-color: #E74C3C; font-weight: bold; } .Table-Normal tr { margin: 0; padding: 0; border: 0; border: 1px solid #999; width: 100%; } .Table-Normal tr td { margin: 0; padding: 4px 8px; border: 0; border: 1px solid #999; } .Table-Normal tbody tr:nth-child(2) { background-color: #EEE; }

<table id="top-leader" class="Table-Normal"> <thead> <tr> <td>Position</td> <td>Name</td> <td>Kills</td> <td>Deaths</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Doe</td> <td>16 Kills</td> <td>0 Deaths</td> </tr> <tr> <td>2</td> <td>John Smith</td> <td>13 Kils</td> <td>1 Death</td> </tr> <tr> <td>3</td> <td>Bob Smith</td> <td>11 Kills</td> <td>0 Deaths</td> </tr> </tbody> </table>


Eliminar display: block en .Table-Normal

Fiddle

.Table-Normal { position: relative; //display: block; margin: 10px auto; padding: 0; width: 100%; height: auto; border-collapse: collapse; text-align: center; }


Especificando display: block que ha reemplazado el valor predeterminado de la hoja de estilo del navegador para el elemento de table : display: table . Eliminando display: block o reemplazándolo con display: table soluciona esto.