• Article

SYSK 175: Border for a

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.