Geschachtelte Tabellen: 1px border mit css

Ich versuche zum erstellen einer Tabelle mit einem 1px schwarzen Rand.

Ich habe eine Tabelle verschachteln in die Haupt-Tabelle, und bekommen "dick" Grenzen, wo die nächste Tabelle Hintern gegen seinen umschließenden <td>. Ich will einfach nur einen 1px Rand überall.

Habe ich dies, in Wirkung:

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;}
InformationsquelleAutor Paul | 2009-06-26
  1. 2

    Wenn ich Sie richtig verstehe, die Sie verwenden können, border-left, border-right, border-top und border-bottom für das erstellen dieser "speziellen" Fällen wollen.

    Beispielsweise in der verschachtelte Tabellen können Sie festlegen, 

    border-left:0;

    zu bekommen, eine "resultierende" 1 px Rand auf der linken Seite der geschachtelten Tabelle.

    InformationsquelleAutor anderstornvig
  2. 2

    geben keinen border-style für die geschachtelte Tabelle 

    <!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>
    InformationsquelleAutor Rony
  3. 1

    Einfach die border-Attribut auf die tds. Wenn Sie möchten, eine 1px border gesamten, werde es tun; Sie brauchen es nicht auf den Tischen.

    InformationsquelleAutor chaos
  4. 1

    diese Seite beschreibt, wie zu tun es ziemlich gut: http://www.visakopu.net/misc/table-border-css/

    Was passiert, ist, dass die Grenzen der Zellen sind, stoßen sich gegeneinander, so dass es zu erscheinen, dass es dicker Grenzen, als tatsächlich da sind. Statt über das border-collapse-Eigenschaft, legen Sie eine Grenze auf die Tabelle selbst, und nur, sagen wir, die oberen und linken Seiten, und legen Sie grenzt an den unteren und rechten Seiten für die Zellen.

    InformationsquelleAutor matt
Schreibe einen Kommentar