Q&A
tableのヘッダーを固定表示したいのですが、IE11でヘッダーが固定されません。
Chromeなら固定されるのですが、、、。
どなたかご教授お願い致します。
html
1<html> 2<head> 3 <style> 4 thead { display: block; } 5 tbody { overflow-y: scroll; display: block; height: 200px; } 6 thead tr th, tbody tr td { text-align: center; border: solid 1px; } 7 tr { height: 30px; } 8 .test_td1 { width: 80px; min-width: 80px; } 9 .test_td2 { width: 80px; min-width: 80px; } 10 .test_td3 { width: 100px; min-width: 100px; } 11 .test_td4 { width: 80px; min-width: 80px; } 12 .test_td5 { width: 80px; min-width: 80px; } 13 .test_td6 { width: 80px; min-width: 80px; } 14 .test_td7 { width: 120px; min-width: 120px; } 15 .test_td8 { width: 80px; min-width: 80px; } 16 .test_td9 { width: 80px; min-width: 80px; } 17 .test_td10 { width: 80px; min-width: 80px; } 18 </style> 19</head> 20<body> 21 <table> 22 <thead> 23 <tr> 24 <th>head1</th> 25 <th>head2</th> 26 <th>head3</th> 27 <th>head4</th> 28 <th>head5</th> 29 <th>head6</th> 30 <th>head7</th> 31 <th>head8</th> 32 <th>head9</th> 33 <th>head10</th> 34 </tr> 35 </thead> 36 <tbody> 37 <tr> 38 <td class="test_td1">test1</td> 39 <td class="test_td2">test2</td> 40 <td class="test_td3">test3</td> 41 <td class="test_td4">test4</td> 42 <td class="test_td5">test5</td> 43 <td class="test_td6">test6</td> 44 <td class="test_td7">test7</td> 45 <td class="test_td8">test8</td> 46 <td class="test_td9">test9</td> 47 <td class="test_td10">test10</td> 48 </tr> 49 <tr> 50 <td class="test_td1">test1</td> 51 <td class="test_td2">test2</td> 52 <td class="test_td3">testtest3</td> 53 <td class="test_td4">test4</td> 54 <td class="test_td5">test5</td> 55 <td class="test_td6">test6</td> 56 <td class="test_td7">testtesttest7</td> 57 <td class="test_td8">test8</td> 58 <td class="test_td9">test9</td> 59 <td class="test_td10">test10</td> 60 </tr> 61 <tr> 62 <td class="test_td1">test1</td> 63 <td class="test_td2">test2</td> 64 <td class="test_td3">test3</td> 65 <td class="test_td4">test4</td> 66 <td class="test_td5">test5</td> 67 <td class="test_td6">test6</td> 68 <td class="test_td7">test7</td> 69 <td class="test_td8">test8</td> 70 <td class="test_td9">test9</td> 71 <td class="test_td10">test10</td> 72 </tr> 73 <tr> 74 <td class="test_td1">test1</td> 75 <td class="test_td2">test2</td> 76 <td class="test_td3">test3</td> 77 <td class="test_td4">test4</td> 78 <td class="test_td5">test5</td> 79 <td class="test_td6">test6</td> 80 <td class="test_td7">test7</td> 81 <td class="test_td8">test8</td> 82 <td class="test_td9">test9</td> 83 <td class="test_td10">test10</td> 84 </tr> 85 <tr> 86 <td class="test_td1">test1</td> 87 <td class="test_td2">test2</td> 88 <td class="test_td3">test3</td> 89 <td class="test_td4">test4</td> 90 <td class="test_td5">test5</td> 91 <td class="test_td6">test6</td> 92 <td class="test_td7">test7</td> 93 <td class="test_td8">test8</td> 94 <td class="test_td9">test9</td> 95 <td class="test_td10">test10</td> 96 </tr> 97 <tr> 98 <td class="test_td1">test1</td> 99 <td class="test_td2">test2</td> 100 <td class="test_td3">test3</td> 101 <td class="test_td4">test4</td> 102 <td class="test_td5">test5</td> 103 <td class="test_td6">test6</td> 104 <td class="test_td7">test7</td> 105 <td class="test_td8">test8</td> 106 <td class="test_td9">test9</td> 107 <td class="test_td10">test10</td> 108 </tr> 109 <tr> 110 <td class="test_td1">test1</td> 111 <td class="test_td2">test2</td> 112 <td class="test_td3">test3</td> 113 <td class="test_td4">test4</td> 114 <td class="test_td5">test5</td> 115 <td class="test_td6">test6</td> 116 <td class="test_td7">test7</td> 117 <td class="test_td8">test8</td> 118 <td class="test_td9">test9</td> 119 <td class="test_td10">test10</td> 120 </tr> 121 <tr> 122 <td class="test_td1">test1</td> 123 <td class="test_td2">test2</td> 124 <td class="test_td3">test3</td> 125 <td class="test_td4">test4</td> 126 <td class="test_td5">test5</td> 127 <td class="test_td6">test6</td> 128 <td class="test_td7">test7</td> 129 <td class="test_td8">test8</td> 130 <td class="test_td9">test9</td> 131 <td class="test_td10">test10</td> 132 </tr> 133 <tr> 134 <td class="test_td1">test1</td> 135 <td class="test_td2">test2</td> 136 <td class="test_td3">test3</td> 137 <td class="test_td4">test4</td> 138 <td class="test_td5">test5</td> 139 <td class="test_td6">test6</td> 140 <td class="test_td7">test7</td> 141 <td class="test_td8">test8</td> 142 <td class="test_td9">test9</td> 143 <td class="test_td10">test10</td> 144 </tr> 145 <tr> 146 <td class="test_td1">test1</td> 147 <td class="test_td2">test2</td> 148 <td class="test_td3">test3</td> 149 <td class="test_td4">test4</td> 150 <td class="test_td5">test5</td> 151 <td class="test_td6">test6</td> 152 <td class="test_td7">test7</td> 153 <td class="test_td8">test8</td> 154 <td class="test_td9">test9</td> 155 <td class="test_td10">test10</td> 156 </tr> 157 <tr> 158 <td class="test_td1">test1</td> 159 <td class="test_td2">test2</td> 160 <td class="test_td3">test3</td> 161 <td class="test_td4">test4</td> 162 <td class="test_td5">test5</td> 163 <td class="test_td6">test6</td> 164 <td class="test_td7">test7</td> 165 <td class="test_td8">test8</td> 166 <td class="test_td9">test9</td> 167 <td class="test_td10">test10</td> 168 </tr> 169 <tr> 170 <td class="test_td1">test1</td> 171 <td class="test_td2">test2</td> 172 <td class="test_td3">test3</td> 173 <td class="test_td4">test4</td> 174 <td class="test_td5">test5</td> 175 <td class="test_td6">test6</td> 176 <td class="test_td7">test7</td> 177 <td class="test_td8">test8</td> 178 <td class="test_td9">test9</td> 179 <td class="test_td10">test10</td> 180 </tr> 181 </tbody> 182 </table> 183</body> 184</html>
回答1件
0
IE11の機能ではないのでテーブルをヘッダ部分とボディー部分の
２つにわけて、ボディーをdivでラップして処理してください
投稿2020/12/07 08:34
総合スコア116683
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/09 12:41