表の本体でscollで表レイアウトが固定されています

本文のscrollで固定された表レイアウトの列を整列しようとしています。本文にスクロールするにはtbodyを使用する必要がありますが、thead trは表示ブロックですが、表示ブロックプロパティでは見出しのように一致させることはできません。あなたがより良いfiddle linkによって理解することができます表の本体でscollで表レイアウトが固定されています

：

http://jsfiddle.net/uAKNx/5067/

出典

2016-07-18 Jainandan singh baghel

。フィドルリンク http://jsfiddle.net/uAKNx/5067/ –

ありがとうございます –

私は以前のフィドルのようなデータのスクロールでhttp://jsfiddle.net/uAKNx/5069/のようなデザインをしたい –

は、あなたのコード内でtheadとtbodyを試してみてください。あなたからフォーク

table { 
 
    border: 1px solid black; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    height: 200px; 
 
    border-collapse: collapse; 
 
    overflow: scroll; 
 
} 
 
tr { 
 
    width: 50px; 
 
} 
 
tr td { 
 
    width: 100%; 
 
} 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    width: 30px; 
 
} 
 
#a { 
 
    position: relative; 
 
    overflow: scroll; 
 
    outline: 2px solid red; 
 
    height: 400px; 
 
}

<table> 
 
    <thead class="tableHeading"> 
 
    <th width="10%">Description</th> 
 
    <th width="5%">Pack</th> 
 
    <th width="5%">size</th> 
 
    <th width="7%">Vendor Item Code #</th> 
 
    <th width="12%">UPC#</th> 
 
    <th width="9%">Item Quantity</th> 
 
    <th width="9%">Previous 
 
     <br>Item Quantity</th> 
 
    <th width="8%">% Variance 
 
     <br>Quantity Count</th> 
 
    <th width="7%">Unit Cost</th> 
 
    <th width="10%">Total Cost</th> 
 
    <th width="10%">Previous Cost</th> 
 
    <th width="8%">% Variance 
 
     <br>Cost</th> 
 
    </thead> 
 
</table> 
 
<div id="a"> 
 
    <table> 
 
    <tbody> 
 
     <tr class=""> 
 
     <td width="10%">TOSTADA CASERA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">24 CNT</td> 
 
     <td width="7%">658978990552</td> 
 
     <td width="12%" style="width: 7%; overflow: hidden;">748703800199</td> 
 
     <td width="9%" id="quantity" data-itemid="905">56565</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">100</td> 
 
     <td width="7%">$0.68</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">TOSTADA BOTANERA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">30 CNT</td> 
 
     <td width="7%">658978990652</td> 
 
     <td width="12%">748703800205</td> 
 
     <td width="9%" id="quantity" data-itemid="906">5654654</td> 
 
     <td width="9%">1</td> 
 
     <td width="8%">100</td> 
 
     <td width="7%">$0.73</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.73</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">DORITOS DE HARINA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">6 OZ</td> 
 
     <td width="7%">658978990752</td> 
 
     <td width="12%">748703800212</td> 
 
     <td width="9%" id="quantity" data-itemid="907">0</td> 
 
     <td width="9%">1</td> 
 
     <td width="8%">0</td> 
 
     <td width="7%">$0.44</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.44</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">DORITOS DE HARINA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">10 OZ</td> 
 
     <td width="7%">658978990852</td> 
 
     <td width="12%">748703800229</td> 
 
     <td width="9%" id="quantity" data-itemid="908">56565</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">100</td> 
 
     <td width="7%">$0.52</td> 
 
     <td width="10%">$29413.80</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">100</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">DORITOS DE HARINA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">11X11</td> 
 
     <td width="7%">658978990952</td> 
 
     <td width="12%">748703800236</td> 
 
     <td width="9%" id="quantity" data-itemid="909">0</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">0</td> 
 
     <td width="7%">$0.88</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">BUNUELOS TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">10 CNT</td> 
 
     <td width="7%">658978991052</td> 
 
     <td width="12%">748703800243</td> 
 
     <td width="9%" id="quantity" data-itemid="910">65146</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">100</td> 
 
     <td width="7%">$1.26</td> 
 
     <td width="10%">$82083.96</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">100</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">SOPE CASERO TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">12 CNT</td> 
 
     <td width="7%">658978991152</td> 
 
     <td width="12%">748703800250</td> 
 
     <td width="9%" id="quantity" data-itemid="911">0</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">0</td> 
 
     <td width="7%">$0.89</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">HUARASOPE TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">32 OZ</td> 
 
     <td width="7%">658978991252</td> 
 
     <td width="12%">748703800267</td> 
 
     <td width="9%" id="quantity" data-itemid="912">65419</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">100</td> 
 
     <td width="7%">$1.30</td> 
 
     <td width="10%">$85044.70</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">100</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">HUARACHES TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">12 CNT</td> 
 
     <td width="7%">658978991352</td> 
 
     <td width="12%">748703800274</td> 
 
     <td width="9%" id="quantity" data-itemid="913">52154</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">100</td> 
 
     <td width="7%">$0.74</td> 
 
     <td width="10%">$38593.96</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">100</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">CORN TORTILLA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">50 CNT</td> 
 
     <td width="7%">658978991452</td> 
 
     <td width="12%">748703800281</td> 
 
     <td width="9%" id="quantity" data-itemid="914">0</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">0</td> 
 
     <td width="7%">$0.83</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">CORN TORTILLA FAMILY PACK TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">72 CNT</td> 
 
     <td width="7%">658978991552</td> 
 
     <td width="12%">748703800298</td> 
 
     <td width="9%" id="quantity" data-itemid="915">15964</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">100</td> 
 
     <td width="7%">$0.42</td> 
 
     <td width="10%">$6704.88</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">100</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">CORN TORTILLA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">90 CNT</td> 
 
     <td width="7%">658978991652</td> 
 
     <td width="12%">748703800304</td> 
 
     <td width="9%" id="quantity" data-itemid="916">0</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">0</td> 
 
     <td width="7%">$1.32</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">CORN TORTILLA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">100 CNT</td> 
 
     <td width="7%">658978991752</td> 
 
     <td width="12%">748703800311</td> 
 
     <td width="9%" id="quantity" data-itemid="917">0</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">0</td> 
 
     <td width="7%">$1.78</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">YELLOW TORTILLA TRANSFERS</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">50 CNT</td> 
 
     <td width="7%">658978991852</td> 
 
     <td width="12%">748703800328</td> 
 
     <td width="9%" id="quantity" data-itemid="918">0</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">0</td> 
 
     <td width="7%">$0.78</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
     <tr class=""> 
 
     <td width="10%">KING SIZE COMO HECHAS A MANO TRANSFE</td> 
 
     <td width="5%">1</td> 
 
     <td width="5%">1 CNT</td> 
 
     <td width="7%">658978991952</td> 
 
     <td width="12%">748703800335</td> 
 
     <td width="9%" id="quantity" data-itemid="919">0</td> 
 
     <td width="9%">0</td> 
 
     <td width="8%">0</td> 
 
     <td width="7%">$0.98</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="10%">$0.00</td> 
 
     <td width="8%">0</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

出典

2016-07-18 13:34:57

ありがとうあなたの反応。それはうまく動作しますが、私はあなたがフィドルで見ることができるように体のスクロールが欲しい –

@Jainandan singh baghelのように。 'css'で遊ぶ必要があります。 –

私はしようとしたが達成できなかったので、もしあなたが何か考えてくれたら助けてください –

JSFiddleリンクを。

動作するかどうかを確認してください。しかし、整列の問題があるかもしれません。

CSS

.scrollit { 
    overflow: scroll; 
    height: 100px; 
}

私は適切な列の配置を持つようにしたいHTML

<table border="1"> 
    <thead> 
    <tr class="tableHeading"> 
     <th width="10%">Description</th> 
     <th width="5%">Pack</th> 
     <th width="5%">size</th> 
     <th width="7%">Vendor Item Code #</th> 
     <th width="12%">UPC#</th> 
     <th width="9%">Item Quantity</th> 
     <th width="9%">Previous 
     <br>Item Quantity</th> 
     <th width="8%">% Variance 
     <br>Quantity Count</th> 
     <th width="7%">Unit Cost</th> 
     <th width="10%">Total Cost</th> 
     <th width="10%">Previous Cost</th> 
     <th width="8%">% Variance 
     <br>Cost</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td colspan="12"> 
     <div class="scrollit"> 
      <table> 
      <tr class=""> 
       <td width="10%">TOSTADA CASERA TRANSFERS</td> 
       <td width="5%">1</td> 
       <td width="5%">24 CNT</td> 
       <td width="7%">658978990552</td> 
       <td width="12%" style="width: 7%; overflow: hidden;">748703800199</td> 
       <td width="9%" id="quantity" data-itemid="905">56565</td> 
       <td width="9%">0</td> 
       <td width="8%">100</td> 
       <td width="7%">$0.68</td> 
       <td width="10%">$0.00</td> 
       <td width="10%">$0.00</td> 
       <td width="8%">0</td> 
      </tr> 
      <tr class=""> 
       <td width="10%">KING SIZE COMO HECHAS A MANO TRANSFE</td> 
       <td width="5%">1</td> 
       <td width="5%">1 CNT</td> 
       <td width="7%">658978991952</td> 
       <td width="12%">748703800335</td> 
       <td width="9%" id="quantity" data-itemid="919">0</td> 
       <td width="9%">0</td> 
       <td width="8%">0</td> 
       <td width="7%">$0.98</td> 
       <td width="10%">$0.00</td> 
       <td width="10%">$0.00</td> 
       <td width="8%">0</td> 
      </tr> 
      </table> 
     </div> 
     </td> 
    </tr> 
    </tbody> 
</table>

出典

2016-07-18 14:00:13

あなたのお礼をありがとうが、列は見出しと一致しません –

はいGauthaman、私は体のスクロールとの位置合わせを探しています –

@Jainandansinghbaghel溶液;あなたはJSとCSSの組み合わせを使用する必要がありますhttp://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody –

表の本体でscollで表レイアウトが固定されています

答えて

関連する問題