In Firefox nicht angezeigte Rahmen mit Randkollaps in der Tabelle, Position: relativ zum Körper oder Hintergrundfarbe in der Zelle

81

Betrachten Sie den folgenden HTML-Code:

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }
    
        div.datagrid table
        {
            border-collapse: collapse;
        }
    
        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Erweitern Sie das Snippet

Beachten Sie, dass die letzte Zelle im Inline-Stil einen linken und einen rechten Rand hat. Sie (oder zumindest ich) würden erwarten, dass dies sichtbar ist. Im IE ist dies der Fall. In Firefox (6) ist dies jedoch nicht der Fall. Sie können dies lösen durch:

  • Position relativ div.datagrid table tbodyim CSS entfernen
  • Wechseln div.datagrid table tbodyzu div.datagrid tableim CSS
  • Entfernen des background-colorOn table.data td.priceCellim CSS
  • Entfernen des border-collapseOn div.datagrid tableim CSS

Dies ist eine vereinfachte Version unseres Codes. Wir haben es auch gelöst (durch Auswahl von Option 2). Aber ich wundere mich über:

  • Ist das ein Fehler in Firefox?
  • Ist das ein Fehler im IE?

Und vor allem: Was ist der Grund, warum Firefox die Grenzen nicht anzeigt, wenn das CSS so ist, wie es ist?

css firefox border Peter
quelle
Fragen Sie mich nicht warum, aber als ich die border-collapseEigenschaft im obigen CSS von der div.datagrid tablein die table.dataselbst verschoben habe , hat es in Ordnung funktioniert. Vielleicht gibt es hier noch jemanden, der erklären kann ... (Ich bin auf Firefox 5)
Kompost
1
Ich habe keine Antwort auf Ihre Frage. Ich vermute, dass dies ein Fehler ist, da die relative Positionierung keine Auswirkungen auf die Ränder haben sollte, aber ich habe einen vereinfachten Testfall erstellt und alle 4 Browser haben ihn unterschiedlich angezeigt! (Fx6, Op 11.50, IE8, Chrome 15) Testfall hier: jsfiddle.net/76Qb7/9
Doug
Ich bin gerade auf dieses Problem gestoßen… lustig, dass ein Firefox-Fehler über einen solchen Zeitraum hinweg besteht.
GDY

Antworten:

64

Das sieht für mich wie ein Firefox-Fehler aus. Die Hintergründe malen über die Grenzen; Sie können es sehen, wenn Sie eine durchscheinende Hintergrundfarbe verwenden.

Ich habe https://bugzilla.mozilla.org/show_bug.cgi?id=688556 eingereicht

Boris Zbarsky
quelle
2
Ich lief in der gleichen Ausgabe. Es wird immer noch nicht von Firefox behoben. Scheint, als würden sie es nicht ernst genug nehmen, obwohl es ein großes Designproblem ist, wenn sie auch den Selektor: nth-child (ungerade) verwenden, um nur den ungeraden Zeilen einen Hintergrund hinzuzufügen. Ich brauche auch die Grenze, um sie perfekt zu machen. Vielen Dank für die Einreichung des Fehlers!
Jelmer
Zu Ihrer Information, 9 Jahre später immer noch aktuell.
Charles Merriam
181

Ich bin gerade background-clip: padding-boxauf dieses Problem gestoßen und habe eine reine CSS-Lösung gefunden: Fügen Sie einfach Ihr tdElement hinzu.

Weitere Informationen finden Sie in diesem Artikel: https://developer.mozilla.org/en-US/docs/CSS/background-clip

medoingthings
quelle
2
Huh, ich verstehe es nicht. In den Dokumenten wird angegeben, ob sich der Hintergrund unterhalb des Rahmens erstreckt . Ich habe den Eindruck, dass es oben auf der Grenze gerendert wird.
Peter
2
Beste CSS-Lösung, die ich gefunden habe. Vielen Dank für das Teilen von @medoingthings
helpse
14

Nur um alles an einem Ort zu platzieren.

Das Problem tritt auf, wenn Sie eine Zelle mit einer relativen Position in einer Tabelle mit reduzierten Rändern haben (wie Boris angegeben und den Fehler https://bugzilla.mozilla.org/show_bug.cgi?id=688556 ausgefüllt hat ).

Dies kann einfach mit CSS gelöst werden, wie von user2342963 angegeben (Hinzufügen eines Hintergrundclips: Auffüllfeld zur Zelle).

Sie können das Problem (mit Firefox) und das Update hier sehen: http://jsfiddle.net/ramiro_conductiva/XgeAS/

table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}

<table class="tableSeparate">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative cellRelativeFix">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
Ramiro Sánchez
quelle
2
Dies funktioniert, um den Fehler in FF zu beheben, aber im IE gibt es einen hässlichen weißen Rand innerhalb des regulären Randes. Wie können wir das beheben?
Tony Brix
9

Dies ist ein Fehler in Firefox und hoffentlich wird er bald behoben. In der Zwischenzeit konnte ich dieses Problem für mich beheben, indem ich meine tdZellen auf stellte position: static. Hoffentlich hilft das jemand anderem.

td {
    position: static;
}
smitt04
quelle
3
Wenn Sie Pseudoelemente wie ::beforeoder ::afterauf demselben verwenden td, werden position: staticdiese Stile durcheinander gebracht. background-clip: padding-boxist sicherer.
Sebsemillia
3

Eine andere mögliche Lösung besteht darin, Colspan-Fehler in Ihrem Tabellen-Markup zu korrigieren.

Anscheinend können Colspan-Fehler bei Verwendung von Border-Collapse dieselben Effekte mit versteckten Rändern verursachen: Collapse;

Ich wurde über http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html zur richtigen Lösung geleitet .

In meine Tabelle hatte ich <th colspan = "9"> geschrieben, als es nur 8 Spalten gab.

Das verursachte einen Fehler (versteckter rechter Rand) in

  • Chrome 51.0.2704.103 m (64-Bit)
  • Vivaldi 1.2.490.43 () (32-Bit)

aber mit rechten Rändern in gerendert

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Kante 25.10586.0.0
Pekaaw
quelle
1
Randkollaps
Andere Syntaxfehler lösen dies anscheinend ebenfalls aus. In Anbetracht des Ratschlags von @ pekaaw habe ich mein HTML Korrektur gelesen und festgestellt, dass ich dort war, <thead>wo ich es haben wollte </thead>. Das Beheben dieses Tippfehlers hat das Randproblem behoben!
Davidreedernst
1

Der beste Weg, um dieses Problem zu lösen, besteht darin, so etwas zu tun.

Beachten Sie die Position: relative Eigenschaft in den Elementen "thead" und "tbody", diese sind wichtig. Dies gilt auch für die Eigenschaften "Rahmenkollaps" und "Hintergrundclip". Funktioniert mit der Hintergrundfarbe für alle und abwechselnden Zeilen.

table {
  width: 100% !important;
  border-spacing: 0;
  border-collapse: unset !important;

  thead {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      th {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }

  tbody {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      &:last-child {
        td {
          border-bottom: 1px solid #737373!important;
        }
      }

      td {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }
}
Mike Dinder
quelle
0

Hinzufügen einer weiteren Lösung für dieses (alte) Problem: Dies ist mir heute passiert, weil ich eine etwas komplizierte Tabelle mit mehreren Personen habe. Das einzige Problem war tatsächlich, dass ich ein geöffnetes tbody-Tag hatte, das nicht geschlossen war. Ich habe dieses Tag gelöscht und die Rahmen wurden wieder angezeigt, ohne dass etwas in meinem CSS geändert werden musste. Zur Verdeutlichung war meine Struktur ungefähr so:

<table>
  <thead>
    <tr><th>Col1</th><th>Col2</th></tr>
  </thead>
  <tbody>
  <tbody>
    <tr><td>Val1</td><td>Val2</td></tr>
    <tr><td>Val3</td><td>Val4</td></tr>
  </tbody>
</table>
Erweitern Sie das Snippet

Katz
quelle