Table Styling with XHTML 1.0 Transitional

StackOverflow https://stackoverflow.com/questions/3233464

Question

I am trying to add a border and padding to the table row of XHTML 1.0 Transitional web page (see code below to repro). I know that if I change the type of page to something else, I will be able to add borders and padding to the table rows and cells. But in XHTML 1.0 Transitional, it doesn't work at all.

Considering that I can't change the DOCTYPE, what am I suppose to do add a border and padding to the table?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            table
            {
                border: solid 1px black;
            }

            tr
            {
                /* Doesn't work */
                margin: 10px;
                border: solid 1px black;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>                
            </tbody>
        </table>
    </body>
</html>
Was it helpful?

Solution

Try seeing if the border and margin works on the td.

td
{ 
    margin: 10px; 
    border: solid 1px black; 
}

If it does you'll have to make it top/bottom margin only for center cells.

OTHER TIPS

If you want them around each cell, apply the style to the td element, not the tr: Assuming you want it on the tr, I'm not entirely sure why this works, but adding border-collapse to the table will make the tr border work:

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

            tr
            {
                /*use if you want the lines to be per row instead of per cell*/
                border: 1px solid black;
            }

For the margins, I'd go with applying padding to the td elements:

            td
            {
                padding: 10px;

                /*use if you want lines between each cell*/
                border: 1px solid black;
            }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top