2

結果を検索していますが、結果が見つかりませんでした。

簡単なテーブルが欲しいのですが、3 つの質問があります。

  1. ヘッダー（太字部分）の固定方法です

  2. 左セクション（1種類のテキストエリア）の固定方法

  3. 右部の固定方法（7種類のテキストは ）

HTML

<div class="m-m">
<table class="demo-table">
    <tr>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
    </tr>
    <tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr>
    <tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr>

</table>
</div>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}
.m-m{
width:200px;
height:200px;
margin:0 auto;
overflow:scroll;
}
.demo-table{
border:solid 1px red;
width:100%;

}
.demo-table tr:first-child td{
font-weight:bold;
}

.demo-table tr td{
border:solid 2px green;
padding:5px;
}

これを結果にしたい

ここに画像の説明を入力

4

1 に答える 1

0

わかりました、画像はあなたが何をしたいのかをよりよく説明しています. テーブルのヘッダーとボディの両方に固定幅を設定できる場合は、それらを別々に設定できます。

ここに jsFiddle を配置しましたhttp://jsfiddle.net/3Lxj3/1/役立つかもしれません。

<div id="header">
     <div style="width:40%;">header 1</div>
     <div style="width:30%;">header 2</div>
     <div style="width:30%;">header 3</div>
    <div style="clear:both"></div>
</div>
    <div style="clear:both"></div>
<div id="left">
    <div>row 1</div>
    <div>row 2</div>
    <div>row 3</div>
    <div>row 4</div>
</div>
<div id="body">
     <table>
     <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    </table>
</div>
<div id="right">
    <div>check 1</div>
    <div>check 2</div>
    <div>check 3</div>
    <div>check 4</div>
</div>

CSS:

#body table {
width:100%;
}
#header, #left, #body table {
    border:1px solid #ccc;
}
table tr td {
    height:50px;
}
#header {
    margin-left:20%;
    margin-right:20%;
    width:59%;
}
#header div {
    float:left;
}
#body {
    width:59%;
    float:left;
    overflow:scroll;
    height:200px;
}
#left {
    float:left;
    width:20%;
    height:200px;
}
#left div {
    height:50px;
}
#right {
    float:left;
    width:20%;
    height:200px;
}
#right div {
    height:50px;
}

基本的に、ヘッダーとボディは別々に配置しますが、垂直方向に整列するようにしてください。きれいではありませんが、機能します。

于 2013-03-19T13:38:26.533 に答える