Naudodami TABLE lenteles, pradedantieji HTML gamyboje susidurs su tuo, kaip pakeisti krašto storį, nes numatytasis TABLE krašto nustatymas yra labai storas, net jei jis yra 1px. Todėl yra ir kitų metodų, naudojamų plonų linijų kraštinėms kurti, ir čia yra CSS naudojimo būdas plonoms linijoms įgyvendinti, kuris yra labai efektyvus ir suderinamas su visomis naršyklėmis.
Jei tiesiog nustatote plonos linijos lentelės kraštinę, sunku užtikrinti, kad naršyklė būtų suderinama. Įprasta praktika yra naudoti CSS2 "border-collapse:collapse;" atributų sujungimo lentelės kraštinės; Ir nustatykite kairę ir viršutinę lentelės elementų kraštines bei dešinę ir apatinę th ir td elementų kraštines.
HTML:
<table> <tr> <th>Stalo galvutė (1 eilutė, 1 eilutė)</th> <th>Lentelės galvutė (1 eilutė, 2 eilutė)</th> <th>Lentelės galvutė (1 eilutė, 3 eilutė)</th> </tr> <tr> <td>Lentelės duomenys (1 eilutė, 1 stulpelis)</td> <td>Lentelės duomenys (1 eilutė, 2 stulpelis)</td> <td>lentelės duomenys (1 eilutė, 3 stulpelis)</td> </tr> <tr> <td>lentelės duomenys (2 eilutė, 1 stulpelis)</td> <td>lentelės duomenys (2 eilutė, 2 stulpelis)</td> <td>Lentelės duomenys (2 eilutė, 3 stulpelis)</td> </tr>
CSS</table>:
lentelė{border-collapse:collapse; tarpai tarp kraštų:0; border-left:1px solid #888; border-top:1px solid #888; fonas:#efefef; }
th,td{border-right:1px solid #888; border-bottom:1px solid #888; paminkštinimas:5px 15px; }
th{šrifto svoris:paryškintas; fonas:#ccc; } |
Paskelbta 2015-04-18 22:19:21
|
|
|
|
Paskelbta 2015-07-15 01:06:57
|
Savininkas|
Paskelbta 2021-03-11 10:51:40
|
Peržiūrėkite palaikymą
