Obramowania niewyświetlane w Firefoksie ze zwinięciem obramowania w tabeli, pozycją: względną w treści lub kolorem tła w komórce

Question 1

Rozważ następujący kod HTML:

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

Rozwiń fragment

Zwróć uwagę, że ostatnia komórka ma lewe i prawe obramowanie w stylu wbudowanym. Ty (a przynajmniej ja) spodziewałbym się, że to będzie widoczne. W IE tak jest. Ale w Firefoksie (6) tak nie jest. Możesz rozwiązać ten problem poprzez:

Usuwanie pozycji względem div.datagrid table tbodyw CSS
Zmiana div.datagrid table tbodyna div.datagrid tablew CSS
Usuwanie background-coloron table.data td.priceCellw CSS
Usuwanie border-collapseon div.datagrid tablew CSS

To jest uproszczona wersja naszego kodu; rozwiązaliśmy go również (wybierając opcję 2). Ale zastanawiam się nad tym:

Czy to błąd w Firefoksie?
Czy to błąd w IE?

A w szczególności: z jakiego powodu Firefox nie pokazywał granic, gdy CSS jest taki, jaki jest?

Question 2

Dla mnie wygląda to na błąd Firefoksa. Tła malują się na granicach; możesz to zobaczyć, jeśli użyjesz półprzezroczystego koloru tła.

Złożyłem https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Question 3

Właśnie natknąłem się na ten problem i doszedłem do rozwiązania tylko dla CSS: po prostu dodaj background-clip: padding-boxdo swojego tdelementu.

Zobacz ten artykuł, aby uzyskać więcej informacji: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Question 4

Wystarczy umieścić wszystko w jednym miejscu.

Problem pojawia się, gdy masz komórkę ze względną pozycją wewnątrz tabeli ze zwiniętymi krawędziami (jak wskazał Boris i wypełnił błąd https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

Można to łatwo rozwiązać za pomocą CSS, jak wskazał user2342963 (Dodanie background-clip: padding-box do komórki).

Możesz zobaczyć problem (z Firefoksem) i poprawkę tutaj: 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>

Question 5

Jest to błąd w przeglądarce Firefox i miejmy nadzieję, że wkrótce go naprawią. Ale w międzyczasie udało mi się rozwiązać ten problem, ustawiając moje tdkomórki na position: static. Mam nadzieję, że to pomoże komuś innemu.

td {
    position: static;
}

Question 6

Innym możliwym rozwiązaniem jest poprawienie błędów colspan w znacznikach tabeli.

Najwyraźniej błędy colspan mogą powodować te same efekty z ukrytymi krawędziami podczas używania border-collapse: collapse;

Zostałem skierowany do właściwego rozwiązania przez http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html .

W mojej tabeli napisałem <th colspan = "9">, gdy było tylko 8 kolumn.

To spowodowało błąd (ukryta prawa krawędź) w programie

Chrome 51.0.2704.103 m (64-bitowy)
Vivaldi 1.2.490.43 () (32-bitowy)

ale renderowane z właściwymi granicami w

Firefox 44.0.2
IE 11 (11.420.10586.0)
Edge 25.10586.0.0

Question 7

Najlepszym sposobem rozwiązania tego problemu jest zrobienie czegoś takiego.

Zwróć uwagę na właściwości position: względne w elementach „thead” i „tbody”, te są ważne. Podobnie jak właściwości border-collapse i background-clip. Działa z kolorem tła we wszystkich i naprzemiennych wierszach.

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

Question 8

Dodanie innego rozwiązania tego (starego) problemu: Przydarzyło mi się to dzisiaj, ponieważ mam dość skomplikowaną tabelę z wieloma osobami. Jedynym problemem było to, że miałem otwarty tag tbody, który nie był zamknięty. Usunąłem ten tag i obramowania pojawiły się ponownie, bez konieczności zmiany czegokolwiek w moim CSS. Aby wyjaśnić, moja struktura wyglądała mniej więcej tak:

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

Rozwiń fragment