theadがブラウザの縮小していくと可変してしまうのをどれだけ縮小しても可変しないようにしたいです!
(theadをjQueryで動かしてテーブルの上をスライドするようにしています)
---HTML
<table class="table-design"><thead id="Head"> <tr> <th class="tmp"><p class="PCMD">COL1</p></th> <th class="mny">TableHeader2</th> <th class="mny">TableHeader3</th> <th class="mny">TableHeader4</th> <th class="mny">TableHeader5</th> <th class="mny">TableHeader6</th> </tr> </thead> <tbody> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> <tr> <td class="tmp">Contents1</td> <td class="mny">Contents2</td> <td class="mny">Contents3</td> <td class="mny">Contents4</td> <td class="mny">Contents5</td> <td class="mny">Contents6</td> </tr> </tbody> </table>
--CSS
.table-design{
table-layout: fixed; text-align:center;
}
.tmp {
border: solid 1px; width:85px; height:30px;
}
.mny {
border: solid 1px; width:128px; height:30px;
}
#Head{
position:absolute; background-color : #A4A4A4;
}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/05 04:20