各thをtdの下に揃えます（tbodyは存在しません）。

最初の行の浮動小数点を作成しようとしているスニペットを作成しました。 tbodyの私の最初の行には、吹き人（th）が含まれています。私のテーブルにはtheadの部分はありません。フローティング作品ですが、それぞれをどのように変更してthを下のtdsに合わせるかわかりません。私はそれをtheadで動作させる方法を知っています。しかし、この場合、すべての行はtbodyにあります。各thをtdの下に揃えます（tbodyは存在しません）。

table tbody tr:first-child 
 
    { 
 
    position:fixed; 
 
    }

<table border="1" class="richtext-query-table"> 
 
    <tbody> 
 
     <tr> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

出典

2017-10-25 Apolo Radomer

あなたは、私はそう思ったあなたの細胞 – Pete

@Peteための幅を設定する必要があります。しかし、私はX個の列を持つかもしれません。毎回CSSを変更する必要があります。 –

I a）はtbodyの最初の行を削除し、theadに貼り付け、theadを作成することを決めました。次に、スクリプトを使用してヘッダーを浮動させました。

t = $('table.richtext-query-table') 
 
firstTr = t.find('tr:first').remove() 
 
firstTr.find('td').contents().unwrap().wrap('<th>') 
 
t.prepend($('<thead></thead>').append(firstTr)) 
 

 
var tableOffset = $(".richtext-query-table").offset().top; 
 
var $header = $(".richtext-query-table > thead").clone(); 
 
var $fixedHeader = $("#header-fixed").append($header); 
 

 
$(window).bind("scroll", function() { 
 
    var offset = $(this).scrollTop(); 
 
    
 
    if (offset >= tableOffset && $fixedHeader.is(":hidden")) { 
 
     $fixedHeader.show(); 
 
    } 
 
    else if (offset < tableOffset) { 
 
     $fixedHeader.hide(); 
 
    } 
 
});

table { height: 10px; } 
 
#header-fixed { 
 
    position: fixed; 
 
    top: 0px; display:none; 
 
    background-color:white; 
 
} 
 
table a:link { 
 
    color: #666; 
 
    font-weight: bold; 
 
    text-decoration:none; 
 
} 
 
table a:visited { 
 
    color: #999999; 
 
    font-weight:bold; 
 
    text-decoration:none; 
 
} 
 
table a:active, table a:hover { 
 
    color: #bd5a35; 
 
    text-decoration:underline; 
 
} 
 
table { 
 
    font-family:Arial, Helvetica, sans-serif; 
 
    color:#666; 
 
    font-size:12px; 
 
    background:#eaebec; 
 
    border:#ccc 1px solid; 
 
    border-radius:3px; 
 
    border-collapse:collapse; 
 
    border-spacing: 0; 
 
    box-shadow: 0 1px 2px #d1d1d1; 
 
} 
 
table th { 
 
    padding:10px 10px 10px 10px; 
 
    border-top:0; 
 
    border-bottom:1px solid #e0e0e0; 
 
    border-left: 1px solid #e0e0e0; 
 
    background: #ededed; 
 
} 
 
table th:first-child { 
 
    text-align: left; 
 
} 
 
table tr:first-child th:first-child { 
 
    border-top-left-radius:3px; 
 
    border-left: 0; 
 
} 
 
table tr:first-child th:last-child { 
 
    border-top-right-radius:3px; 
 
} 
 
table tr { 
 
    text-align: center; 
 
} 
 
table td:first-child { 
 
    text-align: left; 
 
    border-left: 0; 
 
} 
 
table td { 
 
    padding:10px; 
 
    border-bottom:1px solid #e0e0e0; 
 
    border-left: 1px solid #e0e0e0; 
 
    background: #fafafa; 
 
} 
 
table tr:last-child td { 
 
    border-bottom:0; 
 
} 
 
table tr:last-child td:first-child { 
 
    border-bottom-left-radius:3px; 
 
} 
 
table tr:last-child td:last-child { 
 
    border-bottom-right-radius:3px; 
 
} 
 
table tr:hover td { 
 
    background: #f2f2f2; 
 
} 
 
table th, table td { 
 
    width: 160px; 
 
} 
 
#wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table border="1" class="richtext-query-table"> 
 
    <tbody> 
 
     <tr> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td> 
 
     <td>BBBB</td> 
 
     <td>£1,169.29</td> 
 
     <td>546,331</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<table id="header-fixed"></table>

出典

2017-10-25 13:13:28

各thをtdの下に揃えます（tbodyは存在しません）。

答えて

関連する問題