Стилизация таблиц с помощью XHTML 1.0 Transitional - PullRequest
Новая
       9

Стилизация таблиц с помощью XHTML 1.0 Transitional

1 голос
/ 13 июля 2010

Я пытаюсь добавить рамку и отступ к строке таблицы переходной веб-страницы XHTML 1.0 (см. Код ниже для воспроизведения).Я знаю, что если я изменю тип страницы на что-то другое, я смогу добавить границы и отступы к строкам и ячейкам таблицы.Но в XHTML 1.0 Transitional он вообще не работает.

Учитывая, что я не могу изменить DOCTYPE, что я должен сделать, чтобы добавить границу и отступы к таблице? 

<!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>

Ответы [ 2 ]

1 голос
/ 13 июля 2010

Попробуйте посмотреть, работает ли граница и поле на тд. 

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

Если это произойдет, вам нужно будет сделать это верхнее / нижнее поле только для центральных ячеек.

1 голос
/ 13 июля 2010

Если вы хотите, чтобы они были вокруг каждой ячейки, примените стиль к элементу td, а не к tr. Предполагая, что вы хотите использовать его для tr, я не совсем уверен, почему это работает, но добавление border-collapse в таблицу приведет к сделать так, чтобы границы работали: 

            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;
            }

Для полей я бы применил отступ к элементам td: 

            td
            {
                padding: 10px;

                /*use if you want lines between each cell*/
                border: 1px solid black;
            }
...