回答

收藏

在 CSS 中设置 cellpadding 和 cellspacing?

技术问答 技术问答 253 人阅读 | 0 人回复 | 2023-09-11

在 HTML 表格中,cellpaddingandcellspacing可以这样设置:
' X# I9 \7 i  n7 I2 y; |+ ~
    [table]5 ^8 @9 ^( m' ]! O- C/ o7 E
如何使用 CSS 实现相同的功能?
/ p7 u8 o4 E* T* f+ G                                                                " L7 r' q  Z/ n
    解决方案:                                                                2 G7 f! M& z% E" ^" ?1 {
                                                                基本' s$ k6 w7 C1 g* A
为了控制 CSS 中的“cellpadding你可以简单地说padding使用表单元格。例如 10px 的“cellpadding”:
7 k% U' ^5 T* {: S2 B- {
    td      padding: 10px;}
    : r4 @, x- y" V" u! o0 R
对于“cellspacing,你可以border-spacingCSS 属性应用于您的表格。例如, 10px 的“cellspacing”:
5 E* W$ H( c0 n  |( R, O# Q& v$ ?" n. w
    table      border-spacing: 10px;    border-collapse: separate;}4 s0 x! m) O" V6 ?6 o! x
这一属性甚至允许单独的水平和垂直间距,这是旧的单元格间距无法实现的。
! n1 @; _9 m) R  I& WIE 问题 ≤ 7* a& a, Z3 h+ ^# p! c
除 Internet Explorer 到 Internet Explorer 7,你几乎不走运。我说几乎是因为这些浏览器仍然支持它们。border-collapse将相邻表单元格边界的属性合并。假如您试图消除单元格间距(即 ),cellspacing="0"那么border-collapse:collapse它应该有同样的效果:表单元格之间没有空间。然而,这种支持是有问题的,因为它不会被覆盖cellspacingtable现有 元素HTML 属性。8 M' ~) q/ g  k% L  W* r% \9 n/ I
简而言之:非 Internet Explorer 5-7 浏览器,border-spacing处理您。对于 Internet Explorer,如果你的情况恰到好处(你想要 0 单元格距,你的表格还没有定义),你可以使用它border-collapse:collapse.! ~+ v! {& F+ P3 c
    table      border-spacing: 0;    border-collapse: collapse;}
    ) i+ T' k( D( U6 I5 c
分享到:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则