1. 首頁
  2. 問答
  3. 表格中固定的表格佈局

表格中固定的表格佈局

2016-07-18 114 views
0

我正在嘗試對齊表格佈局，並使用正文中的滾動。 給身體滾動我不得不使用tbody，thead tr作爲顯示塊，但顯示塊屬性不讓列匹配相同的標題。表格中固定的表格佈局

您可以通過fiddle link更好地理解：

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

來源

2016-07-18 Jainandan singh baghel

+0

我想有列排列正確。 小提琴鏈接 http://jsfiddle.net/uAKNx/5067/ –

+0

在此先感謝 –

+0

我想要像http://jsfiddle.net/uAKNx/5069/這樣的設計滾動數據像以前的小提琴 –

回答

2

嘗試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

+0

非常感謝你的迴應。它工作正常，但我想滾動身體，因爲你可以看到在小提琴 –

+0

@Jainandan singh baghel那樣。但需要用'css'玩。 –

+0

我試過，但不能實現，所以請幫助我，如果你有任何想法 –

1

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

+0

感謝您的rply，但仍列與標題不匹配 –

+0

是Gauthaman，我正在尋找與身體滾動對齊 –

+0

@Jainandansinghbaghel - 檢查此解;你將不得不使用JS和CSS的組合http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody –

相關問題

 相關問題