перенести "лишние строки" в другую колонку
Добрый вечер, подскажите как решить такую задачу: есть HTML таблица на ~150строк (данные в одну колонку) нужно как то средствами Javascript ограничить таблицу в 50 строк, а не помещающиеся строки перенести в новые колонки. В общем нужно по максимуму вместить элементы таблицы в один экран. Заранее спасибо
|
central,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html, body{
height: 100%;
width: 100%;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 80%;
height: 70%;
justify-content: flex-start;
margin: 0 auto;
}
.content .item {
text-align: center;
box-sizing: border-box;
border: 1px solid #0000FF;
}
</style>
</head>
<body>
<div class="content"><div class="item">001</div>
<div class="item">002</div>
<div class="item">003</div>
<div class="item">004</div>
<div class="item">005</div>
<div class="item">006</div>
<div class="item">007</div>
<div class="item">008</div>
<div class="item">009</div>
<div class="item">010</div>
<div class="item">011</div>
<div class="item">012</div>
<div class="item">013</div>
<div class="item">014</div>
<div class="item">015</div>
<div class="item">016</div>
<div class="item">017</div>
<div class="item">018</div>
<div class="item">019</div>
<div class="item">020</div>
<div class="item">021</div>
<div class="item">022</div>
<div class="item">023</div>
<div class="item">024</div>
<div class="item">025</div>
<div class="item">026</div>
<div class="item">027</div>
<div class="item">028</div>
<div class="item">029</div>
<div class="item">030</div>
<div class="item">031</div>
<div class="item">032</div>
<div class="item">033</div>
<div class="item">034</div>
<div class="item">035</div>
<div class="item">036</div>
<div class="item">037</div>
<div class="item">038</div>
<div class="item">039</div>
<div class="item">040</div>
<div class="item">041</div>
<div class="item">042</div>
<div class="item">043</div>
<div class="item">044</div>
<div class="item">045</div>
<div class="item">046</div>
<div class="item">047</div>
<div class="item">048</div>
<div class="item">049</div>
<div class="item">050</div>
<div class="item">051</div>
<div class="item">052</div>
<div class="item">053</div>
<div class="item">054</div>
<div class="item">055</div>
<div class="item">056</div>
<div class="item">057</div>
<div class="item">058</div>
<div class="item">059</div>
<div class="item">060</div>
<div class="item">061</div>
<div class="item">062</div>
<div class="item">063</div>
<div class="item">064</div>
<div class="item">065</div>
<div class="item">066</div>
<div class="item">067</div>
<div class="item">068</div>
<div class="item">069</div>
<div class="item">070</div>
<div class="item">071</div>
<div class="item">072</div>
<div class="item">073</div>
<div class="item">074</div>
<div class="item">075</div>
<div class="item">076</div>
<div class="item">077</div>
<div class="item">078</div>
<div class="item">079</div>
<div class="item">080</div>
<div class="item">081</div>
<div class="item">082</div>
<div class="item">083</div>
<div class="item">084</div>
<div class="item">085</div>
<div class="item">086</div>
<div class="item">087</div>
<div class="item">088</div>
<div class="item">089</div>
<div class="item">090</div>
<div class="item">091</div>
<div class="item">092</div>
<div class="item">093</div>
<div class="item">094</div>
<div class="item">095</div>
<div class="item">096</div>
<div class="item">097</div>
<div class="item">098</div>
<div class="item">099</div>
<div class="item">100</div>
<div class="item">101</div>
<div class="item">102</div>
<div class="item">103</div>
<div class="item">104</div>
<div class="item">105</div>
<div class="item">106</div>
<div class="item">107</div>
<div class="item">108</div>
<div class="item">109</div>
<div class="item">110</div>
<div class="item">111</div>
<div class="item">112</div>
<div class="item">113</div>
<div class="item">114</div>
<div class="item">115</div>
<div class="item">116</div>
<div class="item">117</div>
<div class="item">118</div>
<div class="item">119</div>
<div class="item">120</div>
<div class="item">121</div>
<div class="item">122</div>
<div class="item">123</div>
<div class="item">124</div>
<div class="item">125</div>
<div class="item">126</div>
<div class="item">127</div>
<div class="item">128</div>
<div class="item">129</div>
<div class="item">130</div>
<div class="item">131</div>
<div class="item">132</div>
<div class="item">133</div>
<div class="item">134</div>
<div class="item">135</div>
<div class="item">136</div>
<div class="item">137</div>
<div class="item">138</div>
<div class="item">139</div>
<div class="item">140</div>
<div class="item">141</div>
<div class="item">142</div>
<div class="item">143</div>
<div class="item">144</div>
<div class="item">145</div>
<div class="item">146</div>
<div class="item">147</div>
<div class="item">148</div>
<div class="item">149</div>
<div class="item">150</div>
<div class="item">151</div>
<div class="item">152</div>
<div class="item">153</div>
<div class="item">154</div>
<div class="item">155</div>
<div class="item">156</div>
<div class="item">157</div>
<div class="item">158</div>
<div class="item">159</div>
<div class="item">160</div>
<div class="item">161</div>
<div class="item">162</div>
<div class="item">163</div>
<div class="item">164</div>
<div class="item">165</div>
<div class="item">166</div>
<div class="item">167</div>
<div class="item">168</div>
<div class="item">169</div>
<div class="item">170</div>
<div class="item">171</div>
<div class="item">172</div>
<div class="item">173</div>
<div class="item">174</div>
<div class="item">175</div>
<div class="item">176</div>
<div class="item">177</div>
<div class="item">178</div>
<div class="item">179</div>
<div class="item">180</div>
<div class="item">181</div>
<div class="item">182</div>
<div class="item">183</div>
<div class="item">184</div>
<div class="item">185</div>
<div class="item">186</div>
<div class="item">187</div>
<div class="item">188</div>
<div class="item">189</div>
<div class="item">190</div>
<div class="item">191</div>
<div class="item">192</div>
<div class="item">193</div>
<div class="item">194</div>
<div class="item">195</div>
<div class="item">196</div>
<div class="item">197</div>
<div class="item">198</div>
<div class="item">199</div>
<div class="item">200</div></div>
</body>
</html>
|
Спасибо, но у меня не divы а именно таблица, т.е. нужно добавить необходимое кол-во колонок и перенести ячейки снизу первой колонки во 2-3 колонки
|
таблица перенос ячеек
central,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table{
margin: 0 auto;
border-collapse: collapse;
}
td{
text-align: center;
box-sizing: border-box;
border: 1px solid #0000FF;
padding: 6px 4px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var b = .8 * document.documentElement.clientHeight,
c = document.querySelectorAll("tr"),
d;
[].forEach.call(c, function(a, e) {
b -= a.scrollHeight;
0 < b ? d = ++e : (a.parentNode.removeChild(a), c[e % d].appendChild(a.cells[0]));
});
});
</script>
</head>
<body>
<table>
<tr>
<td>001</td>
</tr>
<tr>
<td>002</td>
</tr>
<tr>
<td>003</td>
</tr>
<tr>
<td>004</td>
</tr>
<tr>
<td>005</td>
</tr>
<tr>
<td>006</td>
</tr>
<tr>
<td>007</td>
</tr>
<tr>
<td>008</td>
</tr>
<tr>
<td>009</td>
</tr>
<tr>
<td>010</td>
</tr>
<tr>
<td>011</td>
</tr>
<tr>
<td>012</td>
</tr>
<tr>
<td>013</td>
</tr>
<tr>
<td>014</td>
</tr>
<tr>
<td>015</td>
</tr>
<tr>
<td>016</td>
</tr>
<tr>
<td>017</td>
</tr>
<tr>
<td>018</td>
</tr>
<tr>
<td>019</td>
</tr>
<tr>
<td>020</td>
</tr>
<tr>
<td>021</td>
</tr>
<tr>
<td>022</td>
</tr>
<tr>
<td>023</td>
</tr>
<tr>
<td>024</td>
</tr>
<tr>
<td>025</td>
</tr>
<tr>
<td>026</td>
</tr>
<tr>
<td>027</td>
</tr>
<tr>
<td>028</td>
</tr>
<tr>
<td>029</td>
</tr>
<tr>
<td>030</td>
</tr>
<tr>
<td>031</td>
</tr>
<tr>
<td>032</td>
</tr>
<tr>
<td>033</td>
</tr>
<tr>
<td>034</td>
</tr>
<tr>
<td>035</td>
</tr>
<tr>
<td>036</td>
</tr>
<tr>
<td>037</td>
</tr>
<tr>
<td>038</td>
</tr>
<tr>
<td>039</td>
</tr>
<tr>
<td>040</td>
</tr>
<tr>
<td>041</td>
</tr>
<tr>
<td>042</td>
</tr>
<tr>
<td>043</td>
</tr>
<tr>
<td>044</td>
</tr>
<tr>
<td>045</td>
</tr>
<tr>
<td>046</td>
</tr>
<tr>
<td>047</td>
</tr>
<tr>
<td>048</td>
</tr>
<tr>
<td>049</td>
</tr>
<tr>
<td>050</td>
</tr>
<tr>
<td>051</td>
</tr>
<tr>
<td>052</td>
</tr>
<tr>
<td>053</td>
</tr>
<tr>
<td>054</td>
</tr>
<tr>
<td>055</td>
</tr>
<tr>
<td>056</td>
</tr>
<tr>
<td>057</td>
</tr>
<tr>
<td>058</td>
</tr>
<tr>
<td>059</td>
</tr>
<tr>
<td>060</td>
</tr>
<tr>
<td>061</td>
</tr>
<tr>
<td>062</td>
</tr>
<tr>
<td>063</td>
</tr>
<tr>
<td>064</td>
</tr>
<tr>
<td>065</td>
</tr>
<tr>
<td>066</td>
</tr>
<tr>
<td>067</td>
</tr>
<tr>
<td>068</td>
</tr>
<tr>
<td>069</td>
</tr>
<tr>
<td>070</td>
</tr>
<tr>
<td>071</td>
</tr>
<tr>
<td>072</td>
</tr>
<tr>
<td>073</td>
</tr>
<tr>
<td>074</td>
</tr>
<tr>
<td>075</td>
</tr>
<tr>
<td>076</td>
</tr>
<tr>
<td>077</td>
</tr>
<tr>
<td>078</td>
</tr>
<tr>
<td>079</td>
</tr>
<tr>
<td>080</td>
</tr>
<tr>
<td>081</td>
</tr>
<tr>
<td>082</td>
</tr>
<tr>
<td>083</td>
</tr>
<tr>
<td>084</td>
</tr>
<tr>
<td>085</td>
</tr>
<tr>
<td>086</td>
</tr>
<tr>
<td>087</td>
</tr>
<tr>
<td>088</td>
</tr>
<tr>
<td>089</td>
</tr>
<tr>
<td>090</td>
</tr>
<tr>
<td>091</td>
</tr>
<tr>
<td>092</td>
</tr>
<tr>
<td>093</td>
</tr>
<tr>
<td>094</td>
</tr>
<tr>
<td>095</td>
</tr>
<tr>
<td>096</td>
</tr>
<tr>
<td>097</td>
</tr>
<tr>
<td>098</td>
</tr>
<tr>
<td>099</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>101</td>
</tr>
<tr>
<td>102</td>
</tr>
<tr>
<td>103</td>
</tr>
<tr>
<td>104</td>
</tr>
<tr>
<td>105</td>
</tr>
<tr>
<td>106</td>
</tr>
<tr>
<td>107</td>
</tr>
<tr>
<td>108</td>
</tr>
<tr>
<td>109</td>
</tr>
<tr>
<td>110</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>112</td>
</tr>
<tr>
<td>113</td>
</tr>
<tr>
<td>114</td>
</tr>
<tr>
<td>115</td>
</tr>
<tr>
<td>116</td>
</tr>
<tr>
<td>117</td>
</tr>
<tr>
<td>118</td>
</tr>
<tr>
<td>119</td>
</tr>
<tr>
<td>120</td>
</tr>
<tr>
<td>121</td>
</tr>
<tr>
<td>122</td>
</tr>
<tr>
<td>123</td>
</tr>
<tr>
<td>124</td>
</tr>
<tr>
<td>125</td>
</tr>
<tr>
<td>126</td>
</tr>
<tr>
<td>127</td>
</tr>
<tr>
<td>128</td>
</tr>
<tr>
<td>129</td>
</tr>
<tr>
<td>130</td>
</tr>
<tr>
<td>131</td>
</tr>
<tr>
<td>132</td>
</tr>
<tr>
<td>133</td>
</tr>
<tr>
<td>134</td>
</tr>
<tr>
<td>135</td>
</tr>
<tr>
<td>136</td>
</tr>
<tr>
<td>137</td>
</tr>
<tr>
<td>138</td>
</tr>
<tr>
<td>139</td>
</tr>
<tr>
<td>140</td>
</tr>
<tr>
<td>141</td>
</tr>
<tr>
<td>142</td>
</tr>
<tr>
<td>143</td>
</tr>
<tr>
<td>144</td>
</tr>
<tr>
<td>145</td>
</tr>
<tr>
<td>146</td>
</tr>
<tr>
<td>147</td>
</tr>
<tr>
<td>148</td>
</tr>
<tr>
<td>149</td>
</tr>
<tr>
<td>150</td>
</tr>
<tr>
<td>151</td>
</tr>
<tr>
<td>152</td>
</tr>
<tr>
<td>153</td>
</tr>
<tr>
<td>154</td>
</tr>
<tr>
<td>155</td>
</tr>
<tr>
<td>156</td>
</tr>
<tr>
<td>157</td>
</tr>
<tr>
<td>158</td>
</tr>
<tr>
<td>159</td>
</tr>
<tr>
<td>160</td>
</tr>
<tr>
<td>161</td>
</tr>
<tr>
<td>162</td>
</tr>
<tr>
<td>163</td>
</tr>
<tr>
<td>164</td>
</tr>
<tr>
<td>165</td>
</tr>
<tr>
<td>166</td>
</tr>
<tr>
<td>167</td>
</tr>
<tr>
<td>168</td>
</tr>
<tr>
<td>169</td>
</tr>
<tr>
<td>170</td>
</tr>
<tr>
<td>171</td>
</tr>
<tr>
<td>172</td>
</tr>
<tr>
<td>173</td>
</tr>
<tr>
<td>174</td>
</tr>
<tr>
<td>175</td>
</tr>
<tr>
<td>176</td>
</tr>
<tr>
<td>177</td>
</tr>
<tr>
<td>178</td>
</tr>
<tr>
<td>179</td>
</tr>
<tr>
<td>180</td>
</tr>
<tr>
<td>181</td>
</tr>
<tr>
<td>182</td>
</tr>
<tr>
<td>183</td>
</tr>
<tr>
<td>184</td>
</tr>
<tr>
<td>185</td>
</tr>
<tr>
<td>186</td>
</tr>
<tr>
<td>187</td>
</tr>
<tr>
<td>188</td>
</tr>
<tr>
<td>189</td>
</tr>
<tr>
<td>190</td>
</tr>
<tr>
<td>191</td>
</tr>
<tr>
<td>192</td>
</tr>
<tr>
<td>193</td>
</tr>
<tr>
<td>194</td>
</tr>
<tr>
<td>195</td>
</tr>
<tr>
<td>196</td>
</tr>
<tr>
<td>197</td>
</tr>
<tr>
<td>198</td>
</tr>
<tr>
<td>199</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</body>
</html>
|
Отлично, спасибо! То что нужно
|
| Часовой пояс GMT +3, время: 21:17. |