IEでtableのborderが消えた話
IEでtableのborderが消えた話
症状
- table の td ないし th にbackground-color と border を一緒に設定すると、borderが見えなくなる。
- しかし開発者ツールなどでbackground-colorを消してやるとborderが見えるようになる
参考コード
html
<table>
<tbody>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
</table>
sample.scss(SCSS記法)
tr {
th {
background-color: #f00;
border: 1px solid #000;
color: #fff;
}
td {
border: 1px solid #000;
}
}
確認機種
- IE9 - 11。
- Firefox47(情報提供ありがとうございます！)
解決策
- td ないし th に position: relative;がかかってないかを確認する。
- かかってたら無効化すると治る。
html
<table>
<tbody>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
</table>
sample.scss(SCSS記法)
tr {
th {
background-color: #f00;
border: 1px solid #000;
color: #fff;
}
td {
border: 1px solid #000;
}
}
別担当が *{position: relative;} とかやってくれてたおかげで引き起こされたようでした。
他の人に迷惑かけちゃダメ絶対。
Author And Source
この問題について(IEでtableのborderが消えた話), 我々は、より多くの情報をここで見つけました https://qiita.com/T_sa/items/90a24ee955baea149aa1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .