代码之家  ›  专栏  ›  技术社区  ›  ReynierPM

如何防止tr>td元素中的双边界

  •  9
  • ReynierPM  · 技术社区  · 12 年前

    我想知道是否有可能在 tr > td 要素如果我使用 border:1px solid #DDD 则第一个元素将具有所有边界,然后第二个元素也将具有所有的边界。有什么建议吗?我看到了 post 但对我来说不起作用,因为它适用于DIV,而且我正在使用表。

    4 回复  |  直到 4 年前
        1
  •  20
  •   Matt Whipple    12 年前

    从以下内容开始:

    border-collapse:collapse;

    然后根据需要进行调谐。使用 :first-child :last-child 伪选择器可以用于修改一端的默认样式。

        2
  •  6
  •   daGUY    12 年前

    不要在单元格上设置边框,而是将表格本身的背景颜色设置为您希望的边框颜色,然后将单元格间隔1px:

    HTML格式:

    ​<table>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
        </tr>
    </table>
    

    CSS格式:

    table {
        background: #ccc;
        border-spacing: 1px;
    }
    td {
        background: #fff;
        padding: 5px;
    }
    

    这将给你带来:

    cellspacing example

    请注意,您还必须为单元格本身设置背景色,否则表的背景色将显示出来。

        3
  •  4
  •   Ryan Kinal    12 年前

    你正在寻找 border-collapse

    border-collapse CSS属性选择表的边框模型。这对表格单元格的外观和样式有很大影响。

    价值观就是这样。

    border-collapse:  collapse | separate | inherit
    
        4
  •  0
  •   Nestor Mancilla    3 年前

    对于那些之前的答案不起作用的人,我使用了表{边框间距:-2px;}(适用于mPDF)