0

I am facing a problem in IE. I have a table with virtual scrolling. I am adding rows in this table with JavaScript dynamically. and setting top of each rows accordingly. As you can see in the code. This work fine till 51130. But after 51130 rows are getting overlap in IE. In other browsers it work fine. Here is the screenshot of my problem.

enter image description here

table, th, td {
    border: 1px solid black;
    white-space:nowrap;
   /*  padding-left:5px; */
    table-layout:fixed;
    width: 100%;
    padding-right:5px;
}

.vrow{
  display:table; 
  position:absolute; 
    table-layout: fixed;
    width:99.99%;
    left: 1px;
    font-size: 0px;
    line-height: 0px;
}
.vrow td{
 width: 50px;
 line-height: 28px;
 white-space: nowrap;
 font-size: 15px;
 overflow: hidden;
 /* display: inline-block; */
}
.fixed-header th{
 width: 50px;
}
div.main-table {
    overflow:auto;
    width:200px;
    height:300px;
    table-layout:fixed;
}
div.fixed-header-table {
    position:relative;
}

div.fixed-header-wrapper {
    overflow:hidden; 
    /* width: 999999999999999999px;  */
}

/* style for two seprate div */
#sidebar    {
    width: 50%;
    min-height: 400px;
    background: #EFF0F1;
    float: left;
}
#main{
    width: 500px;
    overflow: hidden;
}

#page-wrap  {
    width: 50%;
    background: #FFFFCC;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}
#outerDiv{
width: 500px;
overflow: hidden;
position: relative;
}
.container{
max-height: 300px;
overflow-y: auto;
}
<div class="container" id="main_btl_container" style="padding: 0px; border: 1px solid black; border-image: none; width: 500px; height: 360px; position: relative;">
   <table id="table-body" cellspacing="0" cellpadding="0">
      <tr class="vrow" style="top: 1532940px;">
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
      </tr>
      <tr class="vrow" style="top: 1532970px;">
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
      </tr>
      <tr class="vrow" style="top: 1533000px;">
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
      </tr>
      <tr class="vrow" style="top: 1533030px;">
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
      </tr>
      <tr class="vrow" style="top: 1533060px;">
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
      </tr>
      <tr class="vrow" style="top: 1533090px;">
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
      </tr>
      <tr class="vrow" style="top: 1533120px;">
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
         <td>51104</td>
      </tr>
      <tr class="vrow" style="top: 1533150px;">
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
         <td>51105</td>
      </tr>
      <tr class="vrow" style="top: 1533180px;">
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
         <td>51106</td>
      </tr>
      <tr class="vrow" style="top: 1533210px;">
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
         <td>51107</td>
      </tr>
      <tr class="vrow" style="top: 1533240px;">
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
         <td>51108</td>
      </tr>
      <tr class="vrow" style="top: 1533270px;">
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
         <td>51109</td>
      </tr>
      <tr class="vrow" style="top: 1533300px;">
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
         <td>51110</td>
      </tr>
      <tr class="vrow" style="top: 1533330px;">
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
         <td>51111</td>
      </tr>
      <tr class="vrow" style="top: 1533360px;">
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
         <td>51112</td>
      </tr>
      <tr class="vrow" style="top: 1533390px;">
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
         <td>51113</td>
      </tr>
      <tr class="vrow" style="top: 1533420px;">
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
         <td>51114</td>
      </tr>
      <tr class="vrow" style="top: 1533450px;">
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
         <td>51115</td>
      </tr>
      <tr class="vrow" style="top: 1533480px;">
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
         <td>51116</td>
      </tr>
      <tr class="vrow" style="top: 1533510px;">
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
         <td>51117</td>
      </tr>
      <tr class="vrow" style="top: 1533540px;">
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
         <td>51118</td>
      </tr>
      <tr class="vrow" style="top: 1533570px;">
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
         <td>51119</td>
      </tr>
      <tr class="vrow" style="top: 1533600px;">
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
         <td>51120</td>
      </tr>
      <tr class="vrow" style="top: 1533630px;">
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
         <td>51121</td>
      </tr>
      <tr class="vrow" style="top: 1533660px;">
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
         <td>51122</td>
      </tr>
      <tr class="vrow" style="top: 1533690px;">
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
         <td>51123</td>
      </tr>
      <tr class="vrow" style="top: 1533720px;">
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
         <td>51124</td>
      </tr>
      <tr class="vrow" style="top: 1533750px;">
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
         <td>51125</td>
      </tr>
      <tr class="vrow" style="top: 1533780px;">
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
         <td>51126</td>
      </tr>
      <tr class="vrow" style="top: 1533810px;">
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
         <td>51127</td>
      </tr>
      <tr class="vrow" style="top: 1533840px;">
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
         <td>51128</td>
      </tr>
      <tr class="vrow" style="top: 1533870px;">
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
         <td>51129</td>
      </tr>
      <tr class="vrow" style="top: 1533900px;">
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
         <td>51130</td>
      </tr>
      <tr class="vrow" style="top: 1533930px;">
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
         <td>51131</td>
      </tr>
      <tr class="vrow" style="top: 1533960px;">
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
         <td>51132</td>
      </tr>
      <tr class="vrow" style="top: 1533990px;">
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
         <td>51133</td>
      </tr>
      <tr class="vrow" style="top: 1534020px;">
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
         <td>51134</td>
      </tr>
      <tr class="vrow" style="top: 1534050px;">
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
         <td>51135</td>
      </tr>
      <tr class="vrow" style="top: 1534080px;">
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
         <td>51136</td>
      </tr>
      <tr class="vrow" style="top: 1534110px;">
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
         <td>51137</td>
      </tr>
      <tr class="vrow" style="top: 1534140px;">
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
         <td>51138</td>
      </tr>
      <tr class="vrow" style="top: 1534170px;">
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
         <td>51139</td>
      </tr>
      <tr class="vrow" style="top: 1534200px;">
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
         <td>51140</td>
      </tr>
      <tr class="vrow" style="top: 1534230px;">
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
         <td>51141</td>
      </tr>
      <tr class="vrow" style="top: 1534260px;">
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
         <td>51142</td>
      </tr>
      <tr class="vrow" style="top: 1534290px;">
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
         <td>51143</td>
      </tr>
      <tr class="vrow" style="top: 1534320px;">
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
         <td>51144</td>
      </tr>
      <tr class="vrow" style="top: 1534350px;">
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
         <td>51145</td>
      </tr>
      <tr class="vrow" style="top: 1534380px;">
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
         <td>51146</td>
      </tr>
      <tr class="vrow" style="top: 1534410px;">
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
         <td>51147</td>
      </tr>
      <tr class="vrow" style="top: 1534440px;">
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
         <td>51148</td>
      </tr>
      <tr class="vrow" style="top: 1534470px;">
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
         <td>51149</td>
      </tr>
      <tr class="vrow" style="top: 1534500px;">
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
         <td>51150</td>
      </tr>
      <tr class="vrow" style="top: 1534530px;">
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
         <td>51151</td>
      </tr>
      <tr class="vrow" style="top: 1534560px;">
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
         <td>51152</td>
      </tr>
      <tr class="vrow" style="top: 1534590px;">
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
         <td>51153</td>
      </tr>
      <tr class="vrow" style="top: 1534620px;">
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
         <td>51154</td>
      </tr>
      <tr class="vrow" style="top: 1534650px;">
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
         <td>51155</td>
      </tr>
      <tr class="vrow" style="top: 1534680px;">
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
         <td>51156</td>
      </tr>
      <tr class="vrow" style="top: 1534710px;">
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
         <td>51157</td>
      </tr>
      <tr class="vrow" style="top: 1534740px;">
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
         <td>51158</td>
      </tr>
      <tr class="vrow" style="top: 1534770px;">
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
         <td>51159</td>
      </tr>
      <tr class="vrow" style="top: 1534800px;">
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
         <td>51160</td>
      </tr>
      <tr class="vrow" style="top: 1534830px;">
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
         <td>51161</td>
      </tr>
      <tr class="vrow" style="top: 1534860px;">
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
         <td>51162</td>
      </tr>
      <tr class="vrow" style="top: 1534890px;">
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
         <td>51163</td>
      </tr>
      <tr class="vrow" style="top: 1534920px;">
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
         <td>51164</td>
      </tr>
      <tr class="vrow" style="top: 1534950px;">
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
         <td>51165</td>
      </tr>
      <tr class="vrow" style="top: 1534980px;">
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
         <td>51166</td>
      </tr>
   </table>
   <div style="left: 0px; top: 0px; width: 1px; height: 1666650px; opacity: 0;"></div>
</div>

Any help would be appreciated. Thanks in advance.

Devender Kumar
  • 515
  • 1
  • 5
  • 12
  • 6
    Seriously, 50,000 rows? Holy cr*p! ...and what's with all this `style="top: 1533000px;` stuff? – Paulie_D Jul 12 '16 at 10:32
  • Why are you using `top` for each row? – Chris Jul 12 '16 at 10:33
  • 1
    There are a limit in pixels to set widths, heights, tops and so on. So you have `top: 1534980px` and `height: 1666650px;`. I don't know exactly the limits in internet explorer, but you can see the F12 developer tools and see the computed value for the rows with the issue. – Marcos Pérez Gude Jul 12 '16 at 10:34
  • @marcos reference? – John Dvorak Jul 12 '16 at 10:37
  • table-layout:fixed; is fraught with peril, that said you will be better off wrapping a div around the table and making it the scrollable container of the table. – Carol McKay Jul 12 '16 at 10:39
  • @Paulie_D Yes rows can be millions. but at a certain time i am showing rows that fit in the view. On scroll down i am replacing rows. something like innerHTML = singleRow[i] for each cell . – Devender Kumar Jul 12 '16 at 10:40
  • http://stackoverflow.com/questions/16637530/whats-the-maximum-pixel-value-of-css-width-and-height-properties – Paulie_D Jul 12 '16 at 10:40
  • I am actually surprised it didn't break sooner. What you want here is to only render the rows you have on screen and (maybe) one (scroll) page up and one below the screen. There really is no point in rendering anything past that. Every time you scroll up and down just remove the items you don't need from DOM and add the ones you need, via javascript. – tao Jul 12 '16 at 10:56
  • @JanDvorak see the link that Paulie_D share, and you can test it writing in a blank page high values and test with browsers in calculated values. – Marcos Pérez Gude Jul 12 '16 at 11:16

2 Answers2

0

If you will remove " style="top: 1534980px;" inline top position from every TR and "position:absolute" from ".vrow" class. it will work fine then.

  • Before posting my question i tried the same. But if i remove position:absolute then rows in the table get disappear when i scroll down. – Devender Kumar Jul 12 '16 at 10:50
0

I had to delete the style="top stuff from your rows

and

this css

.vrow{
     display:table; 
     position:absolute; 
    table-layout: fixed;
    width:99.99%;
    left: 1px;
    font-size: 0px;
    line-height: 0px;
}

to make it work in the jsfiddle, so may work in ie if you do that, haven't tested it as it require me to start up QEMU

https://jsfiddle.net/cmckay/ud3beyrn/

Carol McKay
  • 2,438
  • 1
  • 15
  • 15
  • Thanks for your effort. But it does not work on scroll. The rows get disappear. Because when we scroll down or up content position change. – Devender Kumar Jul 12 '16 at 12:20