[Bootstrap]IE11でテーブルのストライプが有効にならない

皆様いつもお世話になっております。

このたびはTwitter Bootstrap3.3.7を利用してテーブルを作ったのですが、
Chrome, Microsoft Edgeだとテーブルのストライプ機能が正常に動くのですが、
IE11だとなぜかストライプ機能が動作しません。どうしたらIE11でも正常にストライプしたテーブルを表示できるでしょうか？

html
1<html>
2<head>
3<!-- Inserted by TRADOS: --><META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
4<link rel="StyleSheet" href="style.css" type="text/css" />
5<link rel="stylesheet" href="../../css/bootstrap.css">
6<script src="../../js/jquery-2.2.3.js"></script>
7<script src="../../js/tether.min.js"></script>
8<script src="../../js/bootstrap.js"></script>
9<title>システム要件</title>
10
11</head>
12<body>
13  <div class="body-wrapper">
14<h1>システム要件</h1>
15<p>&nbsp;</p>
16<h2 class="subtitle">ライセンスの違い</h2>
17<p>3つの種類のライセンスがあります。 </p>
18<table class="table table-striped" >
19  <tbody>
20<tr>
21    <td valign="top" width="20%">無料版</td>
22    <td width="80%">
23<p>説明などなど説明などなど説明などなど説明などなど説明などなど説明などなど説明などなど説明などなど</p></td>
24  </tr>
25  <tr>
26    <td nowrap="nowrap" valign="top">ライセンス版 </td>
27    <td>
28<p>ライセンスを購入すると、30日以上経過してもそのまま継続してご利用になれます。</p>
29</td>
30  </tr>
31  <tr>
32    <td nowrap="nowrap" valign="top">プロフェッショナル版 </td>
33    <td>個別にお問い合わせください。<br>
34      </td>
35  </tr>
36</tbody>
37</table>
38
39</div>
40</body>
41</html>

css
1/* CSS Document */
2html,body {
3	margin:0;
4	padding:0;
5}
6
7body{
8	font-family:sans-serif;
9	font-size:10pt;
10	overflow-x:hidden;
11}
12table{
13	font-family:sans-serif;
14	font-size:10pt;
15	overflow-x:hidden;
16}
17
18.body-wrapper{
19	margin-top: 20px;
20}
21
22.bold{
23	font-weight: bold;
24}

行動規範の内容に同意します

回答4件

ベストアンサー

確認しましたがIE11で普通に見えますね…
ひとまずこれをつっこんでみてください。
<meta http-equiv="X-UA-Compatible" content="IE=edge">

投稿2016/10/25 09:24

gin

総合スコア2722

kalon

2016/10/28 11:31

お陰様で解決しました。ありがとうございます。

行動規範の内容に同意します

記載されているコードをコピペし、jquery、bootstrapともに、ホスティングされているものを使ったところ、正常に動作しましたが、各css、jsのパスはあっていますか？

投稿2016/10/25 09:02

hiim

総合スコア1689

hiim

2016/10/25 09:23

コメントを見ていると互換表示が問題になっている事のようですので http://qiita.com/rico/items/09c896290e218ed2b7c3 のように <meta http-equiv="X-UA-Compatible" content="IE=edge"/> ではいかがですか？

行動規範の内容に同意します

html
1<table class="table table-striped"border="0" cellpadding="4" cellspacing="0" width="100%">

↓

html
1<table class="table table-striped" border="0" cellpadding="4" cellspacing="0" width="100%">

border="0" の直前にスペース

投稿2016/10/25 08:57

退会済みユーザー

総合スコア0

kalon

2016/10/25 09:04

ご指摘ありがとうございます。しかしながら、ご指導の通りにコードを修正しましたが、やはりストライプされません・・・。自分なりに調べたところ、IE１１が「イントラネットサイトを互換表示で表示する」がオンになっているとこのような現象が起きると書かれていたので、オフにしたところストライプが正しく表示されました。「IE１１にイントラネットサイトを互換表示で表示させない」方法はあるのでしょうか？

行動規範の内容に同意します

<table class="table table-striped"border="0" cellpadding="4" cellspacing="0" width="100%">

となっていますが、いまどきのHTMLでborderやcellpadding、cellspacingは指定するものではありませんし、クラス指定の後にスペースがありません。おそらく、そのあたりの問題でしょう。

投稿2016/10/25 09:05

maisumakun

総合スコア145183

kalon

2016/10/25 09:10

ご指摘の通り修正いたしましたが、やはりIE11だけはストライプが表示されません・・・。

kalon

2016/10/25 09:11

IE11の「イントラネットサイトを互換表示で表示する」をオフにするとストライプが表示されます。IE11に互換表示させない方法はありますか？

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

[Bootstrap]IE11でテーブルのストライプが有効にならない

関連した質問