Межі не відображаються у Firefox із розгортанням кордону на таблиці, положенням: відносним на тілі або кольором тла на комірці

Question 1

Розглянемо такий 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>

Розгорніть фрагмент

Зверніть увагу, що остання клітинка має ліву та праву межі у своєму вбудованому стилі. Ви (або принаймні я) очікували б, що це буде видно. В IE це так. Але у Firefox (6) це не так. Ви можете вирішити це шляхом:

Видалення позиції щодо div.datagrid table tbodyв CSS
Зміна div.datagrid table tbodyна div.datagrid tableв CSS
Видалення background-coloron table.data td.priceCellу CSS
Видалення border-collapseon div.datagrid tableу CSS

Це спрощена версія нашого коду; ми також це вирішили (вибравши варіант 2). Але мені цікаво:

Це помилка у Firefox?
Це помилка в IE?

І особливо: з якої причини Firefox не показує межі, коли CSS такий, як є?

Question 2

Це здається мені помилкою Firefox. Фони малюють кордони; це можна побачити, якщо використовувати напівпрозорий колір фону.

Я подав https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Question 3

Просто натрапив на цю проблему і прийшов до рішення лише для css: просто додайте background-clip: padding-boxдо свого tdелемента.

Дивіться цю статтю для отримання додаткової інформації: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Question 4

Просто покласти все в одне місце.

Проблема виникає, коли у вас є комірка з позицією відносно всередині таблиці зі згорнутими межами (як Борис вказав та заповнив помилку https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

Це можна легко вирішити за допомогою CSS, як вказано користувачем2342963 (Додавання фонового кліпу: поле заповнення до комірки).

Ви можете побачити проблему (з Firefox) та її виправлення тут: 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

Це помилка у firefox, і, сподіваємось, вони скоро її виправлять. Але тим часом я зміг вирішити цю проблему для себе, встановивши для tdклітинок position: static. Сподіваємось, це допоможе комусь іншому.

td {
    position: static;
}

Question 6

Іншим можливим рішенням є виправлення помилок colspan у розмітці таблиці.

Очевидно, чи можуть помилки colspan викликати однакові ефекти із прихованими межами при використанні border-kolaps: collap;

Я був направлений до правильного рішення через http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html .

У своїй таблиці я писав <th colspan = "9">, коли було лише 8 стовпців.

Це спричинило помилку (прихована права межа) у

Chrome 51.0.2704.103 м (64-розрядна)
Vivaldi 1.2.490.43 () (32-розрядна версія)

але надані з правильними межами в

Firefox 44.0.2
IE 11 (11.420.10586.0)
Край 25.10586.0.0

Question 7

Найкращий спосіб вирішити це питання - зробити щось подібне.

Зверніть увагу на позицію: відносна властивість в елементах "thead" та "tbody", це важливо. Так само як і властивості border-kolaps та background-clip. Працює з background-color на всіх та чергуються рядках.

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

Додавання іншого рішення для цієї (старої) проблеми: Це сталося зі мною сьогодні, тому що я маю дещо складну таблицю з кількома tbody. Єдина проблема була насправді в тому, що у мене був відкритий тег tbody, який не закривався. Я видалив цей тег, і межі знову з’явилися, не потребуючи нічого змінювати в моєму CSS. Щоб уточнити, моя структура була приблизно такою:

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

Розгорніть фрагмент