0

列の幅が動的に変更される HTML テーブルを作成しようとしています。テーブルの幅がコンテナーよりも大きくなると、水平スクロールバーが表示されます。

ただし、これを機能させることができないようです-コンテナの幅を設定すると、テーブルの上限として機能し、列の幅を明示的に（CSSまたはJqueryを使用して）設定しても、テーブルは表示を拒否します正しい幅。「overflow:scroll」を設定しても、スクロールバーがアクティブになりません。

列幅が小さくなると、テーブル幅も小さくなるはずです。そのため、テーブル幅 = 100% を使用できません。

注: 列の幅が変更されるたびに表の幅を明示的に設定すると (例: 表の幅 = 500px)、この問題を回避できることがわかっています。もっとエレガントな解決策があることを願っています...

コードは次のとおりです。

JFiddle : http://jsfiddle.net/sangil/NdY22/

HTML

<div class="container">
<table>
    <thead>
        <tr>
            <th class="a">th 1</th>
            <th>th 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1</td>
            <td>td 2</td>
        </tr>
    </tbody>
</table>
</div>

CSS

table {
    table-layout: fixed;
    border: 1px solid black;
    border-collapse: collapse;
}

table td {
    border: 1px solid black;
}

table th {
    border: 1px solid black;
    background-color: lightsteelblue;
}


.container{
    border: 1px solid lightsteelblue;
    width: 300px; 
    overflow: auto;                
}

JS

$(function() {
   $('.a').width(500);
});

</p>

4

2 に答える 2

0

編集：

<div STYLE=" height: 100px; width: 100px; font-size: 12px; overflow: auto;">
    <table bgcolor="green">
       <tr><td bgcolor="blue">testing </td></tr>
       <tr><td>free php scripts;/td></tr>
       <tr><td bgcolor="blue">free php scripts</td></tr>
       <tr><td>free php scripts</td></tr>
       <tr><td bgcolor="blue">free php scripts</td></tr>
   </table>
</div>

参考文献を参照してください

于 2012-11-25T18:40:56.947 に答える
0

あなたの質問を正しく理解できたかどうかわかりません。display: blockテーブルのスクロールバーを使用している場合は、on.aクラスを使用して簡単に行うことができます。

.a {
    width: 400px;
    display:block;
}

ワーキングデモ

于 2012-11-25T18:49:48.060 に答える