发表新帖
发表新帖

How can I apply a border only inside a table?

前端 未结
关注
9 468
盖世英雄少女心
盖世英雄少女心 2020-11-30 17:24

I am trying to figure out how to add border only inside the table. When I do:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}
相关标签:
9条回答
  • 故里飘歌
    2020-11-30 17:32

    this works for me:

    table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

    view example ...

    tested in FF 3.6 and Chromium 5.0, IE lacks support; from W3C:

    Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

    0 讨论(0)
  • 庸人自扰
    2020-11-30 17:32

    Add the border to each cell with this:

    table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

    Remove the top border from all the cells in the first row:

    table > tbody > tr:first-child > td { border-top: 0; }

    Remove the left border from the cells in the first column:

    table > tbody > tr > td:first-child { border-left: 0; }

    Remove the right border from the cells in the last column:

    table > tbody > tr > td:last-child { border-right: 0; }

    Remove the bottom border from the cells in the last row:

    table > tbody > tr:last-child > td { border-bottom: 0; }

    http://jsfiddle.net/hzru0ytx/

    0 讨论(0)
  • 醉酒成梦
    2020-11-30 17:36

    Example of a very simple way for you to achieve the desired effect:

    <table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>
    0 讨论(0)
  • 暗喜
    2020-11-30 17:38

    this should work:

    table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

    edit:

    i just tried it, no table border. but if i set a table border it is eliminated by the border-collapse.

    this is the testfile:

    <html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>
    0 讨论(0)
  • 情深已故
    2020-11-30 17:43

    that will do it all without css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

    code from: HTML CODE TUTORIAL

    0 讨论(0)
  • 情深已故
    2020-11-30 17:46

    Works for any combination of tbody/thead/tfoot and td/th

    table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}
    <table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

    0 讨论(0)
 看不清?
提交回复
热议问题