2

1px の黒い境界線を持つテーブルを作成しようとしています。

メインテーブルにテーブルをネストし、次のテーブルがその囲みに突き当たる「太い」境界線を取得する必要があります<td>。どこでも1pxの境界線が欲しいだけです。

私は実際にこれを持っています：

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

4 に答える 4

2

ネストされたテーブルに境界線スタイルを与えない

<!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>
于 2009-06-27T02:41:19.343 に答える
2

私があなたを正しく理解していれば、border-left、border-right、border-top、およびborder-bottomを使用して、これらの「特別な」ケースを作成できます。

たとえば、ネストされたテーブルで設定できます

border-left:0;

ネストされたテーブルの左側に「結果の」1 ピクセルの境界線を取得します。

于 2009-06-26T15:22:19.303 に答える
1

このページでは、うまくやる方法を説明しています: http://www.visakopu.net/misc/table-border-css/

何が起こっているかというと、セルの境界線が互いにぶつかり合って、実際よりも太い境界線があるように見えます。border-collapse プロパティを使用する代わりに、テーブル自体に境界線を設定します。たとえば、上辺と左辺だけに境界線を設定し、セルの下辺と右辺に境界線を設定します。

于 2009-06-27T02:22:47.090 に答える
1

sに border 属性を追加するだけtdです。全体に 1px の境界線が必要な場合は、それで十分です。テーブルに置く必要はありません。

于 2009-06-26T15:21:16.000 に答える