Вложенные таблицы: граница 1px с css - PullRequest
Новая
       9

Вложенные таблицы: граница 1px с css

2 голосов
/ 26 июня 2009

Я пытаюсь создать таблицу с черной рамкой размером 1 пиксель.

Мне нужно вложить таблицу в основную таблицу и получить «толстые» границы, где следующая таблица упирается в окружающую ее <td>. Я просто хочу, чтобы везде была граница в 1 пиксель.

У меня есть это, в действительности: 

table.outer{border:1px black solid; border-collapse: collapse;}
td{border:1px black solid; border-collapse: collapse;}
table.nexted{border:1px black solid; border-collapse: collapse;}

Ответы [ 4 ]

2 голосов
/ 27 июня 2009

не дают стиля границы для вашей вложенной таблицы 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table.outer
        {
            border: 1px black solid;
            border-collapse: collapse;
            width: 100%;
        }
        table.outer td
        {
            border: 1px black solid;
            border-collapse: collapse;
        }
        table.nested, table.nested td
        {
            border-width: 0px;
            border-collapse: collapse;
            width: 100%;
        }
    </style>
</head>
<body>
    <table class="outer">
        <tr>
            <td>
                <table class="nested">
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                content
            </td>
        </tr>
        <tr>
            <td>
                content
            </td>
            <td>
                <table class="nested">
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
2 голосов
/ 26 июня 2009

Если я вас правильно понимаю, вы можете использовать border-left, border-right, border-top и border-bottom для создания этих «особых» случаев, которые вы хотите.

Например, в ваших вложенных таблицах вы можете установить 

border-left:0;

чтобы получить "результирующую" границу размером 1 пиксель в левой части вложенной таблицы.

1 голос
/ 27 июня 2009

эта страница описывает, как это сделать довольно хорошо: http://www.visakopu.net/misc/table-border-css/

Что происходит, так это то, что границы ячеек сталкиваются друг с другом, в результате чего создается впечатление, что границы толще, чем есть на самом деле. Вместо использования свойства border-collapse вы устанавливаете границу для самой таблицы и, скажем, только на верхней и левой сторонах, а также устанавливаете границы для нижней и правой сторон для ячеек.

1 голос
/ 26 июня 2009

Просто поместите атрибут border в td s. Если вы хотите, чтобы граница была 1px, это будет сделано; вам не нужно это на столах.

...