Javascript.RU

Форум

 Учебник Node.JS скринкаст Стандарт языка

Справочник

Discord чат

  
Статьи Тест знаний Аналоги функций PHP

Курсы javascript

  Сообщения за день

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.03.2018, 21:29
Новичок на форуме
Отправить личное сообщение для central Посмотреть профиль Найти все сообщения от central 		 
Регистрация: 02.03.2018
Сообщений: 3

перенести "лишние строки" в другую колонку
Добрый вечер, подскажите как решить такую задачу: есть HTML таблица на ~150строк (данные в одну колонку) нужно как то средствами Javascript ограничить таблицу в 50 строк, а не помещающиеся строки перенести в новые колонки. В общем нужно по максимуму вместить элементы таблицы в один экран. Заранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 02.03.2018, 22:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,123

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>
Ответить с цитированием
  #3 (permalink)  
Старый 02.03.2018, 22:35
Новичок на форуме
Отправить личное сообщение для central Посмотреть профиль Найти все сообщения от central 		 
Регистрация: 02.03.2018
Сообщений: 3

Спасибо, но у меня не divы а именно таблица, т.е. нужно добавить необходимое кол-во колонок и перенести ячейки снизу первой колонки во 2-3 колонки
Ответить с цитированием
  #4 (permalink)  
Старый 02.03.2018, 23:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,123

таблица перенос ячеек
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>
Последний раз редактировалось рони, 02.03.2018 в 23:15.
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2018, 07:47
Новичок на форуме
Отправить личное сообщение для central Посмотреть профиль Найти все сообщения от central 		 
Регистрация: 02.03.2018
Сообщений: 3

Отлично, спасибо! То что нужно
Ответить с цитированием
Ответ

« MouseEvent у window.pageYOffset??? | События клавиатуры, keypress зацикливается | при удержании ? »


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перенести переменную из одной функции в другую EWB Общие вопросы Javascript 8 19.01.2016 23:20
Как перенести картинку с одной страницы на другую? myautosaler Общие вопросы Javascript 1 02.08.2015 14:15
Необходимо перенести число из функции в форме в другую графу lif3ar Ваши сайты и скрипты 5 09.02.2015 07:31
Событие одной страницы перенести на другую страницу dikucher Events/DOM/Window 11 08.02.2014 16:16


© Илья Кантор, 2007-2021 О проекте - Обратная связь - Архив форума - Вверх