SYSK 175: Border for a <TR> Element Without a ColSpan or a Div


Need to have a table row that has a border around it? 


 


How about leveraging class selectors for this purpose:


<html>


    <head>


        <style type=”text/css”>


            .rowgroup .leftmost


            {


                border-top:thin solid black;


                border-left:thin solid black;


                border-bottom:thin solid black;


            }


 


            .rowgroup td


            {


                border-top:thin solid black;


                border-bottom:thin solid black;


            }


 


            .rowgroup .rightmost


            {


                border-top:thin solid black;


                border-right:thin solid black;


                border-bottom:thin solid black;


            }


        </style>


    </head>


    <body>


        <table cellpadding=”5″ cellspacing=”0″>


            <tr class=”rowgroup”>


                <td class=”leftmost”>Table cell 1</td>


                <td>Cell 2</td>


                <td>Another cell in the middle…</td>


                <td class=”rightmost”>Last cell</td>


            </tr>


        </table>


    </body>


</html>


 


Special thanks to Nicolae Daian who has provided this solution.


 

Comments (6)

  1. Anthony says:

    How about:

    <html>

    <head>

    <style type="text/css">

    table

    {

    border-collapse: collapse;

    }

    tr

    {

    border: solid 2px black;

    }

    </style>

    </head>

    <body>

    <table>

    <tr>

    <td>Table cell 1</td>

    <td>Table cell 2</td>

    <td>Table cell 3</td>

    </tr>

    </table>

    </html>

  2. sor says:

    I’m sorry but what exactly is wrong with

    tr { border: thin solid black }

    ?

  3. irenak says:

    Try it — I don’t believe you will get any border…  Also, by not using class selectors, you can’t apply the border only to selected rows — the rule will apply to all <tr> tags.

  4. Sven says:

    Or, how about <table rules="rows">?  

  5. Anthony says:

    It doesn’t work in IE. But that’s because it’s a bug. It works fine in Mozilla. If you just want one group just use a class.

  6. irenak says:

    You will get a border, but (at least in IE) it won’t be black thin border you get with the original solution…