Table layout fixed with scoll in body of table

Question

I am trying to align column in table-layout fixed with scroll in body. to give scroll in body i have to use tbody, thead tr as display block but display block property does not let the column match same like heading .

you can better understand by the fiddle link:

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

i want to have column alignment proper . fiddle link http://jsfiddle.net/uAKNx/5067/ — Jainandan singh baghel, Jul 18 '16 at 13:29
I want the design like http://jsfiddle.net/uAKNx/5069/ with scroll in data like previous fiddle — Jainandan singh baghel, Jul 18 '16 at 14:34

score 1 · Answer 1 · edited Jul 18 '16 at 14:55

try thead and tbody in your code:

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>

Thanks a lot for your response. It works fine but i want scroll in body as you can see in fiddle — Jainandan singh baghel, Jul 18 '16 at 13:36
@Jainandan singh baghel like that. but need play with `css`. — C.Raf.T, Jul 18 '16 at 14:05
i tried but could not achieve that so please help me if you have any idea — Jainandan singh baghel, Jul 18 '16 at 14:29

score 1 · Answer 2 · answered Jul 18 '16 at 14:00

JSFiddle link forked from yours.

Check and let me know if it works. However you might find alignment issues.

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>

Thanks for your rply but still the columns are not matching with heading — Jainandan singh baghel, Jul 18 '16 at 14:10
yes Gauthaman ,i am looking for alignment with scroll in body — Jainandan singh baghel, Jul 18 '16 at 14:17
@Jainandansinghbaghel - check this solution; you will have to use a combination of JS and CSS http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — Gauthaman Sahadevan, Jul 18 '16 at 14:43

Table layout fixed with scoll in body of table

2 Answers2