2

画像ファイルに挿入された html ファイルがあり、CSS を使用してヘッダーを固定し、残りのテーブルをスクロール可能にする必要があります。

それを行うためのcssを見つけましたが、私の問題は、cssをhtmlファイルに挿入した後、ヘッダーとデータのフォーマットが一致しないことです。

ヘッダーのみを修正する必要があるだけで、書式設定が乱されないようにしたい.

<style type="text/css">
div.tableContainer 
{
    clear: both;
    border: 1px solid #963;
    height: 300px;
    overflow: hidden;
    width: 1000px
}

html>body thead.fixedHeader tr 
{
    display: block
}

thead.fixedHeader th 
{

    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: left
    position: relative
    width: 200px

}

html>body tbody.scrollContent {
    display: block;
    height: 300px;
    overflow: auto;
    width: 100%

}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {

    background: #FFF;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px

}

html>body thead.fixedHeader th +th {
    width: 50px
}


</style>

ここに画像の説明を入力 これはhtmlファイルの画像です。ソースコードを挿入できませんでした。

4

1 に答える 1

0

jsfiddle.net/h5t98/のようにテーブルにマージンを追加します

table
{
    margin-top: 26px;
    width: 138px;
}
.month
{
    width: 79px;
}
.saving
{
    width:49px;
}

最大列幅に応じて変更できる固定列幅を指定しました。

于 2013-11-07T13:01:12.710 に答える