IEでtableのborderが表示されないバグ

「表示されない」と書いたが、厳密には、「border-collapse:collapseを指定したtableの中に、borderとpositon:relativeを指定した子要素(th, td) に背景色をつけると、boderの一部が背景色で上書きされる」というバグと、推測される。

「IEでtableのborderが表示されない！」という場合、このバグかもしれない。

他の方の報告もある：

以下に試行錯誤の結果をまとめる。

バグの確認

以下のcodepenをIEで開くと確認できる。

See the Pen ie11border_bug by Cartman (@Cartman0) on CodePen.

border-collapse:collapse を指定したtable中の borderを指定した子要素(th, td)にpositon:relativeを指定すると背景色background-colorで塗りつぶされてしまう。

再現code:

<table class="table-border collapse">
  <caption>borderが表示されないバグ</caption>
  <tbody>
    <tr>
  <th>1</th>
  <td>a</td>
</tr>
<tr>
  <th>2</th>
  <td class="relative">b：上下右のborderが消える</td>
</tr>
<tr>
  <th>3</th>
  <td>c</td>
</tr>
    <tr>
  <th>4</th>
  <td>d</td>
</tr>
  </tbody>
</table>

<200b>body {
  font-family: sans-serif;
}

.table-border {
  width: 300px;
  border: solid 1px #333;
}
.collapse{
  border-collapse: collapse;
}

.table-border > tbody > tr > th {
  border: 1px solid #333;
  width: 60px;
}
.table-border > tbody > tr > td {
  border: 1px solid #333;
  background-color: #f9f9f9;
}

.relative {
  position: relative;
}

テスト

テスト1:display:block要素では通常にborderが表示される

当たり前だが、通常の要素(display:block)にposition: relativeを指定してもborderはbackgroud-colorで上書きされない。

<div class="box border relative">
  <p>tableでなければborderは消えない</p>
</div>

body {
  font-family: sans-serif;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}
.border{
  border: 1px solid #333;
}
.relative {
  position: relative;
}

テスト2: `position: relative`を消すと、borderは表示される。

<table class="table-border collapse">
  <caption>relativeを外すと表示される</caption>
  <tbody>
    <tr>
  <th>1</th>
  <td>a</td>
</tr>
<tr>
  <th>2</th>
  <td>b：borderが表示される</td>
</tr>
<tr>
  <th>3</th>
  <td>c</td>
</tr>
    <tr>
  <th>4</th>
  <td>d</td>
</tr>
  </tbody>
</table>

body {
  font-family: sans-serif;
}

.table-border {
  width: 300px;
  border: solid 1px #333;
}
.collapse{
  border-collapse: collapse;
}

.table-border > tbody > tr > th {
  border: 1px solid #333;
  width: 60px;
}
.table-border > tbody > tr > td {
  border: 1px solid #333;
  background-color: #f9f9f9;
}

テスト3: `border-collapse:separate`では表示される

border-collapse:separateでは問題なく2重線でboderが表示されるので、border-collapse:collapseにバグがあると推測される。

<table class="table-border separate">
  <caption>border-collapse:separateだと表示される</caption>
  <tbody>
    <tr>
  <th>1</th>
  <td>a</td>
</tr>
<tr>
  <th>2</th>
  <td>b：borderが表示される</td>
</tr>
<tr>
  <th>3</th>
  <td>c</td>
</tr>
    <tr>
  <th>4</th>
  <td>d</td>
</tr>
  </tbody>
</table>

body {
  font-family: sans-serif;
}

.table-border {
  width: 300px;
  border: solid 1px #333;
}
.separate{
  border-collapse: separate;
}
.table-border > tbody > tr > th {
  border: 1px solid #333;
  width: 60px;
}
.table-border > tbody > tr > td {
  border: 1px solid #333;
  background-color: #f9f9f9;
}

テスト4: `background-color`を指定しなければ表示される

background-colorを指定しなければ、borderは通常通り表示される。 background-colorを指定すると上書きされてしまう。

<table class="table-border collapse backgroundNone">
  <caption>background-color を指定しなければ表示される</caption>
  <tbody>
    <tr>
  <th>1</th>
  <td>a</td>
</tr>
<tr>
  <th>2</th>
  <td class="relative">b：borderが表示される</td>
</tr>
<tr>
  <th>3</th>
  <td>c</td>
</tr>
    <tr>
  <th>4</th>
  <td>d</td>
</tr>
  </tbody>
</table>

body {
  font-family: sans-serif;
}

.table-border {
  width: 300px;
  border: solid 1px #333;
}
.collapse{
  border-collapse: collapse;
}
.table-border > tbody > tr > th {
  border: 1px solid #333;
  width: 60px;
}
.table-border > tbody > tr > td {
  border: 1px solid #333;
  background-color: #f9f9f9;
}

.table-border.backgroundNone > tbody > tr > td {
  background: none;
}

.relative {
  position: relative;
}

以上のテストから、「border-collapse:collapseを指定したtableの中に、borderとpositon:relativeを指定した子要素(th, td) に背景色をつけると、boderの一部が背景色で上書きされるというバグ」と推測される（まだ隠れ条件はありそうですが）。

発生しやすい状況

「border-collapse:collapseを指定したtable中のtable子要素(th, td)にborder・背景色がある状態でpositon:relativeを指定する」と発生するので、「テーブルを使ったフォーム入力画面」で発生しやすいと思われる。

解決策

解決策は上記に書いたようにいくつかあり

position: relative を指定せずに他の方法で配置
background-colorを指定しない

で解決できるが、IE対応を考えるとposition: relativeを使わざるを得ない場合もあるのでその場合、relative用のwrapper要素を用意してやれば解決できる。

<table class="table-border collapse">
  <caption>relative用のwrapper要素を用意すれば回避できる</caption>
  <tbody>
    <tr>
  <th>1</th>
  <td>a</td>
</tr>
<tr>
  <th>2</th>
  <td><div class="relative">b：wrapper要素を用意すれば、borderが表示される</div></td>
</tr>
<tr>
  <th>3</th>
  <td>c</td>
</tr>
    <tr>
  <th>4</th>
  <td>d</td>
</tr>
  </tbody>
</table>