I have a table, when I add a row to it, the row's height will fill the whole body of the table. I want to force the height to only be around 10% of the tables body height, and let the rest of the tabe body to be empty. I've tried adding a height propery of 10% to the tbody tr selector but nothing happens. My goal is to have a row take up about 10% of the open area, and then when I click add row, another one will appear under it until the whole table body is full of rows.
Here is my code
#home-index {
margin-top: 10px;
}
tbody {
height: 604px;
}
td {
border: 1px solid lightgray;
}
.hours-cell:hover {
background-color: darkorange;
}
tr {
border: 1px solid lightgray;
}
th {
border: 1px solid lightgray;
}
.dropdown {
width: 25%
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Task</th>
<th>7/11</th>
<th>7/12</th>
<th>7/13</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<select asp-for="Project" asp-items="Model.Projects"></select>
</td>
<td class="dropdown">
<select asp-for="Task"></select>
</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Overall Totals</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr>
<td colspan="2">Over/Under</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tfoot>
</table>
I hope this helps your problem. I added an empty <tr> at the very end of the body with a different class. You can style this row however you like to make it look like an empty body. Any rows you add should be added above this one.
#home-index {
margin-top: 10px;
}
tbody {
height: 604px;
}
td {
border: 1px solid lightgray;
}
.hours-cell:hover {
background-color: darkorange;
}
tr {
border: 1px solid lightgray;
}
th {
border: 1px solid lightgray;
}
.dropdown {
width: 25%
}
tbody tr {
height: 10%
}
.extra {
height: 100%
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Task</th>
<th>7/11</th>
<th>7/12</th>
<th>7/13</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<select asp-for="Project" asp-items="Model.Projects"></select>
</td>
<td class="dropdown">
<select asp-for="Task"></select>
</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr class="extra">
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Overall Totals</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr>
<td colspan="2">Over/Under</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tfoot>
</table>
Related
For my site I have a table which I've done here: https://jsfiddle.net/stw4jyq8/
table {
width: 600px;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr.even {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th>Per 100g</th>
<th>Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td>362</td>
<td>181</td>
</tr>
<tr class="even">
<th>Fat</th>
<td>43.1g</td>
<td>21.6g</td>
<td>10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td>7.9g</td>
<td>3.9g</td>
</tr>
<tr class="even">
<th>Sodium</th>
<td>1,941.9mg</td>
<td>971mg</td>
<td>485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td>39.3g</td>
<td>19.7g</td>
</tr>
<tr class="even">
<th>Fiber</th>
<td>0g</td>
<td>0g</td>
<td>0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td>5.5g</td>
<td>2.7g</td>
</tr>
<tr class="even">
<th>Protein</th>
<td>10.5g</td>
<td>5.3g</td>
<td>2.6g</td>
</tr>
</table>
It looks fine when being viewed on a laptop but it doesn't look great when in mobile view. What I'm looking to do is that when I'm in mobile view it will change to something like:
and then underneath it will be a separate table for per 100g and then a 3rd for per buttery if that makes sense?
For this I am not sure how I could go about that though, would someone be able to point me in the right direction?
I'm thinking this is the best direction to go with? Unless someone has a better idea? Thanks again.
As a first lead, and despite agreeing with the suggestions for a select box, here's how you would have to do it with 3 tables for mobile:
Show your table as you did, but set a class to the columns to ease hiding them and styling them in general
Repeat your table 2 more times with only one data column each time (per 100g, per buttery)
Hide those 2 additional tables on large screens (by default) using CSS
Use a media query to trigger the changes:
Hide 3rd and 4th columns in your large table
Show both mobile tables
Adjust widths for better display
You can see the change in display in the below snippet by adjusting your window size
table.main {
width: 600px;
}
table.mobile {
display: none;
}
table.composition {
border: none;
border-spacing: 0;
border-collapse: collapse;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr:nth-child(2n) {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
#media screen and (max-width: 600px) {
table.main .per-50g {
display: none;
}
table.main .per-100g {
display: none;
}
table.mobile {
display: table;
}
table.composition {
width: 100%;
}
table.composition td {
width: 50%;
}
}
<table class="main composition">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th class="per-100g">Per 100g</th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td class="per-100g">362</td>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td>43.1g</td>
<td class="per-100g">21.6g</td>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td class="per-100g">7.9g</td>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td>1,941.9mg</td>
<td class="per-100g">971mg</td>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td class="per-100g">39.3g</td>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td>0g</td>
<td class="per-100g">0g</td>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td class="per-100g">5.5g</td>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td>10.5g</td>
<td class="per-100g">5.3g</td>
<td class="per-50g">2.6g</td>
</tr>
</table>
<table class="mobile per-100g composition">
<tr>
<th></th>
<th class="per-100g">Per 100g</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-100g">362</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-100g">21.6g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-100g">7.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-100g">971mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-100g">39.3g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-100g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-100g">5.5g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-100g">5.3g</td>
</tr>
</table>
<table class="mobile per-50g composition">
<tr>
<th></th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-50g">2.6g</td>
</tr>
</table>
You could use some javascript to duplicate the table, if that suits your use case.
I would like to count class changed cells in each rows.
My desired result is like below.
are there any way to count?
Thanks
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua')
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
You could do a foreach in each tr and calculate the tds inside it that have the 'aqua' code:
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
recalculate();
})
function recalculate() {
$('tr').each(function(index, tr) {
let result = $(tr).find('td.click.aqua').length;
$(tr).find('.result').text(result);
});
}
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
</table>
Are you just interested in counting the cells with class .aqua or the number of times a cell toggles?
//number of cells with `.aqua` class
$(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
$(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
To count the number of times the .aqua class toggles you would have to increment the previous value, zero if none.
//count the number of times `.aqua` toggles
$(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
$(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
I have the following html and would like to hide the collapsible table by default, only showing the top row. Which when clicked on, will pop out the rest of the table. Right now, it shows the whole table, only to hide once toggled.
<html>
<style>
table {
width: 300px;
border-collapse: collapse;
border-color: grey;
line-height: 1.7;
}
th {
background: #ffffff;
color: #000000;
font-weight: bold;
}
td, th {
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
}
td {
color: #000000;
}
.labels tr td {
font-weight: bold;
color: #feb330;
}
.label tr td label {
display: block;
}
.bold {
font-weight: bold;
}
[data-toggle="toggle"] {
display: none;
}
</style>
<table>
<tbody class="labels">
<tr bgcolor="#ffffff">
<td colspan="3">
<label for="14Season">2014 Season: 19</label>
<input type="checkbox" name="14Season" id="14Season" data-toggle="toggle">
</tr>
</tbody>
<tbody class="hide">
<tr bgcolor="#264033">
<td class="bold" colspan="1" style="color:#ffffff">Date</td>
<td class="bold" colspan="1" style="color:#ffffff">Scorigami</td>
<td class="bold" colspan="1" style="color:#ffffff">Total</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">0-6 L</td>
<td style="color:#ffffff">1</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">8-10 L</td>
<td style="color:#ffffff">2</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/22/13</td>
<td style="color:#ffffff">10-8 W</td>
<td style="color:#ffffff">3</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">3-2 W</td>
<td style="color:#ffffff">4</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">1-4 L</td>
<td style="color:#ffffff">5</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/26/13</td>
<td style="color:#ffffff">7-0 W</td>
<td style="color:#ffffff">6</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-2 W</td>
<td style="color:#ffffff">7</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-1 W</td>
<td style="color:#ffffff">8</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">13-6 W</td>
<td style="color:#ffffff">9</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">10-2 W</td>
<td style="color:#ffffff">10</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/13/14</td>
<td style="color:#ffffff">12-0 W</td>
<td style="color:#ffffff">11</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">8-2 W</td>
<td style="color:#ffffff">12</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">7-5 W</td>
<td style="color:#ffffff">13</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/27/14</td>
<td style="color:#ffffff">9-1 W</td>
<td style="color:#ffffff">14</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/2/14</td>
<td style="color:#ffffff">10-0 W</td>
<td style="color:#ffffff">15</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/3/14</td>
<td style="color:#ffffff">4-2 W</td>
<td style="color:#ffffff">16</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/4/14</td>
<td style="color:#ffffff">10-4 W</td>
<td style="color:#ffffff">17</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/16/14</td>
<td style="color:#ffffff">1-2 L</td>
<td style="color:#ffffff">18</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/17/14</td>
<td style="color:#ffffff">7-12 L</td>
<td style="color:#ffffff">19</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
</script>
</html>
I believe only a small change is required, but can't seem to get it right. Thanks for the help!
Adding
.hide {
display: none;
}
fixed the issue.
table {
display: none;
}
this should work. Also change,
[data-toggle="toggle"] {
display: block;
}
you can give to the table rows logical id's, then use a function to hide/show them
code to retrieve the table rows id's
var table = document.querySelector('table');
// listen for a click
table.addEventListener('click', function(ev){
// get the event targets ID
var serviceID = ev.target.id;
alert(serviceID);
})
I am trying to add nested numbering on a table in which n number of trs can be added dynamically trs added dynamically.
.ssection {
background-color: lightgrey;
border-bottom: thin dotted black;
}
.sLot {
padding-left: 30px;
background-color: lightgrey;
}
.sLotDesc {
padding-left: 40px;
background-color: lightgrey;
}
.sLotExtendedPrc {
background-color: lightgrey;
width: 100%;
text-align: right;
}
.sLotSavingPrc {
background-color: lightgrey;
width: 100%;
text-align: right;
}
.sLotLineItem {
background-color: lightyellow;
padding-left: 90px;
}
.sLotLineItemPrice,
.sLotLineItemQuantity,
.sLotLineItemExtendedPrice,
.sLotLineItemSaving {
background-color: lightyellow;
width: 100%;
text-align: right;
}
<table style="width:100%;">
<tr class="ssection">
<td colspan="4">Introduction</td>
<tr class="sLot">
<td class="sLot" colspan="4">Laptops and Desktops</td>
<tr class="sLotDesc">
<td class="sLotDesc" colspan="4">Laptop Description</td>
</tr>
</tr>
<tr >
<td></td>
<td>Initial</td>
<td>Historic</td>
<td>Reserve</td>
</tr>
<tr class="ssection">
<td colspan="4">Pricing</td>
</tr>
<tr class="sLot">
<td class="sLot" colspan="4">Lot tile</td>
</tr>
<tr class="sLotDesc">
<td class="sLotDesc" colspan="4">Lot Description</td>
</tr>
<tr class="sLotExtendedPrc">
<td class="sLotExtendedPrc">Extended Prc</td>
<td class="sLotExtendedPrcInitialVal">110</td>
<td class="sLotExtendedPrcHistoricVal">110</td>
<td class="sLotExtendedPrcReserveVal">110</td>
</tr>
<tr class="sLotSavingPrc">
<td class="sLotSavingPrc">Saving Prc</td>
<td class="sLotSavingPrcInitialVal">120</td>
<td class="sLotSavingPrcHistoricVal">120</td>
<td class="sLotSavingPrcReserveVal">120</td>
</tr>
<tr class="sLotLineItem">
<td class="sLotLineItem">Lineitem 1</td>
</tr>
<tr class="sLotLineItemPrice">
<td class="sLotLineItemPrice">Price</td>
<td class="sLotLineItemPriceInititalVal">130</td>
<td class="sLotLineItemPriceHistoricVal">130</td>
<td class="sLotLineItemPriceReserveVal">130</td>
</tr>
<tr class="sLotLineItemQuantity">
<td class="sLotLineItemQuantity">Quantity</td>
<td class="sLotLineItemQuantityInitialVal">140</td>
<td class="sLotLineItemQuantityHistoricVal">140</td>
<td class="sLotLineItemQuantityReserveVal">140</td>
</tr>
<tr class="sLotLineItemExtendedPrice">
<td class="sLotLineItemExtendedPrice">Extended Price</td>
<td class="sLotLineItemExtendedPriceInitialVal">150</td>
<td class="sLotLineItemExtendedPriceHistoricVal">150</td>
<td class="sLotLineItemExtendedPriceReserveVal">150</td>
</tr>
<tr class="sLotLineItemSaving">
<td class="sLotLineItemSaving">Saving</td>
<td class="sLotLineItemSavingInitialVal">160</td>
<td class="sLotLineItemSavingHistoricVal">160</td>
<td class="sLotLineItemSavingReserveVal">160</td>
</tr>
<table>
Desired Result
Sections are the outer units. Sections can contain any number of lots, every lot in turn can contain many lineitems.
I'd like to keep this table header fixed, the problem is when I set the thead position to fixed it loses its size. Basically, I just want to keep the thead from moving with the rest of the table but with its original shape and size.
Thanks in advance.
table {
margin: 100 0 100 0;
width: 100%;
}
th,
td,
table {
/*word-wrap: break-word;*/
border: 1px solid black;
border-radius: 3px;
}
body {
overflow: hidden;
}
.scrollable {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
thead {
position: fixed;
width: 100%;
}
.myHead {
width: auto;
border: 11px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title>MyTable</title>
</head>
<body>
<div class="scrollable">
<table>
<thead>
<tr class="myHead">
<th class="header" align="center">Title</th>
<th class="header" align="center">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
</tbody>
</table>
</div>
<div>----------------200px--------------></div>
</body>
</html>
Check out this question as it provides several resources that may help you solve your problem:
Freeze the top row for an html table only (Fixed Table Header Scrolling)
(Couldn't post a comment because I don't have the required reputation)