はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

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

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

「表示されない」と書いたが、厳密には、「border-collapse:collapseを指定したtableの中に、borderpositon: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で塗りつぶされてしまう。

borderが表示されない(上書きされる)バグ

再現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で上書きされない。

display:blockではboderは表示される

<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は表示される。

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にバグがあると推測される。

border-collapse:separate だと表示される

<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を指定すると上書きされてしまう。

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の中に、borderpositon: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>

relative用のwrapper要素を用意すれば回避できる