Al usar tablas TABLE, los principiantes en la producción HTML se encontrarán con cómo cambiar el grosor del borde, porque la configuración predeterminada de bordes de TABLE es muy gruesa incluso si es 1px. Por lo tanto, existen otros métodos para crear bordes de líneas finas, y aquí hay un método para usar CSS para implementar líneas finas, que es muy eficaz y compatible con todos los navegadores.
Si simplemente configuras el borde para una tabla de líneas delgadas, es difícil asegurarse de que el navegador es compatible. Una práctica común es utilizar el "colapso:colapso" de CSS2; bordes de la tabla de fusión de atributos; Y coloca los bordes izquierdo y superior para los elementos de la tabla, y los bordes derecho e inferior para los elementos th y td.
HTML:
<table> <tr> <th>Cabeza de tabla (fila1, col1)</th> <th>cabeza de tabla (fila1, col2)</th> <th>cabeza de tabla (fila1, col3)</th> </tr> <tr> <td>datos de tabla (fila1, col1)</td> <td>Datos de tabla (fila1, COL2) Datos</td> <td>de tablas (fila 1, COL3)</td> </tr> <tr> <td>Datos de tablas (fila 2, COL1) Datos</td> <td>de tabla (fila 2, COL2)</td> <td>Datos de la tabla (row2, col3)</td> </tr>
CSS</table>:
tabla{colapso-borde:colapso; espaciado de fronteras:0; borde izquierdo: 1px sólido #888; borde superior: 1px sólido #888; Antecedentes:#efefef; }
th,td{border-right:1px sólido #888; borde inferior: 1px sólido #888; acolchado: 5px 15px; }
th{font-weight:negrita; Antecedentes:#ccc; } |
Publicado en 18/4/2015 22:19:21
|
|
|
|
Publicado en 15/7/2015 1:06:57
|
Propietario|
Publicado en 11/3/2021 10:51:40
|
Echa un vistazo al soporte
