Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как зафиксировать шапку таблицы при скролле?

Добрый день уважаемые форумчане.
Появилась задача зафиксировать шапку таблицы когда она достигает верхней части страницы.
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
    <thead>
        <tr>
            <th id="up10"></th>
            <th><h6>Офис</h6></th>
            <th><h6>Опросов</h6></th>
            <th><h6>Вызовов менеджера</h6></th>
            <th><h6>Негативных оценок</h6></th>
            <th><h6>Нейтральных оценок</h6></th>
            <th><h6>Положительных</h6></th>
            <th><h6>Средняя оценка агента</h6></th>
            <th><h6>Средняя оценка компании</h6></th>
            <th><h6>Лучшая оценка компании</h6></th>
            <th><h6>Место</h6></th>
        </tr>

Реализовать пока не получается. Подскажите как это можно сделать?
Ответ: Это когда шапка изначально находится сверху страницы. А у меня таблица находится посредине и когда она доходит до верхней части, надо фиксировать.
Вопрос: Как установить в прокрутке стрелку снизу и сверху?

Здравствуйте!

Подскажите, пожалуйста. Как установить в прокрутке стрелку снизу и сверху? И чтоб она появлялась только в случае если картинок больше чем 4.
Ответ:
Сообщение от Jolly1371
Я имею ввиду на сайт, и где нужно поменять?
Подразумевалось, что Вы самостоятельно сможете всё установить... Без доступа к сайту проблематично что-то советовать... Это копируем в <head>:
HTML5
1
2
3
4
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
Это копируем в то место где будет установлен слайдер... В атрибут src тега <img> вставляем пути к своим картинкам:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
  </section>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: false,
        vertical: true,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1
      });
    });
  </script>
Этот код добавляем в общий файл стилей:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    html, body {
      margin: 0;
      padding: 0;
    }
 
    * {
      box-sizing: border-box;
    }
 
    .slider {
        width: 10%;
        margin: 100px auto;
    }
 
    .slick-slide {
      margin: 15px 25px;
    }
 
    .slick-slide img {
      width: 100%;
    }
 
    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
Папку slick из архива копируем в корень сайта... Ну и конечно потребуется дополнительная настройка стилей... Как-то так...
Вопрос: Таблица с опр. цветом текста и фона заголовка и высотой строки

Здравствуйте
Как в вордпресс настроить стиль таблицы, чтобы когда ее вставляешь из буфера обмена на сайт в конструкторе
Она форматировалась автоматически:

Например, отрицательные цифры были красным цветом, положительные - зеленым, шапка таблицы тоже всегда была определенного цвета, ну и чтобы масштабирование работало и чтобы можно было устанавливать межстрочный интервал?

Это какой-то плагин надо использовать?
Ответ:
Сообщение от cyb012
1) Не расширялись автоматически на всю ширину страницы?
4) шапка таблицы тоже всегда была определенного цвета
5) чтобы можно было устанавливать межстрочный интервал?
Эти делается стилями.

Сообщение от cyb012
2) Чтобы в них была доступна сортировка по содержимому (хотя бы по числовым полям)?
Плагины для создания таблиц.

Сообщение от cyb012
3) отрицательные цифры были красным цветом, положительные - зеленым,
Сами? Вряд ли есть готовое решение. Но возможно в платных версиях п2 и есть.
Вопрос: сбор данных из изменяемых таблиц через кнопку

Приветствую знатоки нашел один нужный и полезный код вот тут, про грид таблицу вот тут:

короче проблема в том что здесь описывается отправка формы через нажатие клавиши ENTER. А так как я в JS полнейший нууб, я пытался переделать чтобы форма по AJAX передавалась по нажатию на кнопку... вот примеры.

код работает по нажатию ENTER
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//определяем нажатие кнопки на клавиатуре
$('td.edit').keydown(function(event){
//получаем значение класса и разбиваем на массив
//в итоге получаем такой массив - arr[0] = edit, arr[1] = наименование столбца, arr[2] = id строки
arr = $(this).attr('class').split( " " );
//проверяем какая была нажата клавиша и если была нажата клавиша Enter (код 13)
   if(event.which == 13)
   {
//получаем наименование таблицы, в которую будем вносить изменения
var table = $('table').attr('id');
//выполняем ajax запрос методом POST
 $.ajax({ method: "POST",
//в файл update_cell.php
 url:"update_cell.php",
//создаём строку для отправки запроса
//value = введенное значение
//id = номер строки
//field = название столбца
//table = собственно название таблицы
 data: "value="+$('.ajax input').val()+"&id="+arr[2]+"&field="+arr[1]+"&table="+table,
//при удачном выполнении скрипта, производим действия
 success: function(data){
//находим input внутри элемента с классом ajax и вставляем вместо input его значение
 $('.ajax').html($('.ajax input').val());
//удаялем класс ajax
 $('.ajax').removeClass('ajax');
 }});
 }});
а вот то же самое что я пытался сделать и не вышло значение .AJAX input не передается.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
//определяем нажатие кнопки на клавиатуре
$('button.btn-updt').click(function(){
arr = $('td.edit, td.ajax').attr('class').split( " " );
var table = $('table').attr('id');
 $.ajax({ method: "POST",
 url:"update_cell.php",
 data: "value="+$('.ajax input').val()+"&id="+arr[2]+"&field="+arr[1]+"&table="+table,
 success: function(data){
 $('.ajax').html($('.ajax input').val());
 $('.ajax').removeClass('ajax');
 }});
 });
так что люди добрые помогите кто чем может...
Ответ: вот код
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<?php
$host = 'localhost'; // адрес сервера 
$database = 'TESTER_DB'; // имя базы данных
$user = 'root'; // имя пользователя
$password = ''; // пароль
// подключаемся к серверу
$link = mysqli_connect($host, $user, $password, $database) 
    or die("Ошибка " . mysqli_error($link));
 
// выполняем операции с базой данных
     
// закрываем подключение
//mysqli_close($link);
?>
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
<body>
 
<table id="clients">
<tbody>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Телефон</th>
</tr>
<!--Эта часть выводится с помощью php -->
<tr>
<?php
// выполняем операции с базой данных
$query ="SELECT * FROM clients";
$sql = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link)); 
 while ($result = mysqli_fetch_array($sql)) {
    echo '<tr>';
    echo '<td class="edit firstname '.$result['id'].'">'.$result['firstname'].'</td>';
    echo '<td class="edit lastname '.$result['id'].'">'.$result['lastname'].'</td>';
    echo '<td class="edit phone '.$result['id'].'">'.$result['phone'].'</td>';
    echo '</tr>';
}
?>
</tbody>
</table>
<button class="btn-updt">Отправь меня</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//при нажатии на ячейку таблицы с классом edit
  $(document).ready(function(){
$('td.edit').dblclick(function(){
//находим input внутри элемента с классом ajax и вставляем вместо input его значение
$('.ajax').html($('.ajax input').val());
//удаляем все классы ajax
$('.ajax').removeClass('ajax');
//Нажатой ячейке присваиваем класс ajax
$(this).addClass('ajax');
//внутри ячейки создаём input и вставляем текст из ячейки в него
$(this).html('<input id="editbox" size="'+ $(this).text().length+'" type="text" value="' + $(this).text() + '" />');
//устанавливаем фокус на созданном элементе
$('#editbox').focus();
});
});
</script>
<script type="text/javascript">
//определяем нажатие кнопки на клавиатуре
$('td.edit').keydown(function(event){
//получаем значение класса и разбиваем на массив
//в итоге получаем такой массив - arr[0] = edit, arr[1] = наименование столбца, arr[2] = id строки
arr = $(this).attr('class').split( " " );
//проверяем какая была нажата клавиша и если была нажата клавиша Enter (код 13)
   if(event.which == 13)
   {
//получаем наименование таблицы, в которую будем вносить изменения
var table = $('table').attr('id');
//выполняем ajax запрос методом POST
 $.ajax({ method: "POST",
//в файл update_cell.php
 url:"update_cell.php",
//создаём строку для отправки запроса
//value = введенное значение
//id = номер строки
//field = название столбца
//table = собственно название таблицы
 data: "value="+$('.ajax input').val()+"&id="+arr[2]+"&field="+arr[1]+"&table="+table,
//при удачном выполнении скрипта, производим действия
 success: function(data){
//находим input внутри элемента с классом ajax и вставляем вместо input его значение
 $('.ajax').html($('.ajax input').val());
//удаялем класс ajax
 $('.ajax').removeClass('ajax');
 }});
 }});
$(document).on('blur', '#editbox', function(){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
 
//определяем нажатие кнопки на клавиатуре
$('button.btn-updt').click(function(){
arr = $('td.edit, td.ajax').attr('class').split( " " );
var table = $('table').attr('id');
 $.ajax({ method: "POST",
 url:"update_cell.php",
 data: "value="+$('.ajax input').val()+"&id="+arr[2]+"&field="+arr[1]+"&table="+table,
 success: function(data){
 $('.ajax').html($('.ajax input').val());
 $('.ajax').removeClass('ajax');
 }});
 });
</script>
<?php
include('update_cell.php');
?>
</body>
    
    
</html>
Вопрос: Зафиксировать шапку и боковую колонку таблицы

Здравствуйте!
Есть таблица, построенная полностью на тегах table, thead, tbody, tr, th, td.
Таблица очень большая. На экран не помещается. Чтобы предотвратить прокрутку всей страницы я обернул ее тегом див, задал ему фиксированную ширину и высоту, и overflow поставил в значение auto. То есть когда таблица вылазит за пределы окна, в родительском блоке появляются полосы прокрутки и таблицу можно комфортно прокручивать.
Одно но. Первые две колонки очень важны и озаглавлены как ID и Name. Если пользователь прокрутит таблицу до середины, он запутается какая строка с каким ID и Name ассоциируется. Тоже самое и с шапкой таблицы.
Следовательно первые две колоки а также шапка должнs оставаться на одном и том же месте при прокрутке. В excel'e есть такая функция - зафиксировать области. Вот здесь мне нужно тоже самое
Спасибо за любые советы!
Ответ: Код так код
Вот таблица
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<div class="list-wrap">
<table class="list">
    <thead>
        <tr>
            <th rowspan="2">ID</th>
            <th rowspan="2">Name</th>
            <th rowspan="2">Financial year</th>
            <th rowspan="2">Domicile</th>
            <th rowspan="2">Exchange</th>
            <th rowspan="2">Business description</th>
            <th rowspan="2">Sector</th>
            <th rowspan="2">Industry</th>
            <th colspan="2">Company type</th>
            <th colspan="2">Sales channel</th>
            <th colspan="6">Revenue model</th>
            <th colspan="4">Sub revenue model</th>
            <th colspan="4">Revenue type</th>
            <th colspan="6">End customer(s)</th>
            <th colspan="10">Main B2B customer sectors</th>
            <th colspan="4">Largest single B2B sector</th>
            <th colspan="2">Main geograpgical market (MGM)</th>
            <th colspan="4">Largest single market (LSM)</th>
            <th rowspan="2">Created at</th>
            <th rowspan="2">Actions</th>
            <th rowspan="2">Name</th>
            <th rowspan="2">ID</th>
        </tr>
        <tr>
            <th>Type</th>
            <th>Note</th>
            <th>Channel</th>
            <th>Note</th>
            <th>Model 1</th>
            <th>Note</th>
            <th>Model 2</th>
            <th>Note</th>
            <th>Model 3</th>
            <th>Note</th>
            <th>Model 1</th>
            <th>Note</th>
            <th>Model 2</th>
            <th>Note</th>
            <th>Primary</th>
            <th>Note</th>
            <th>Aftermarket</th>
            <th>Note</th>
            <th>B2B</th>
            <th>Note</th>
            <th>B2C</th>
            <th>Note</th>
            <th>Public</th>
            <th>Note</th>
            <th>Sector 1</th>
            <th>Note</th>
            <th>Sector 2</th>
            <th>Note</th>
            <th>Sector 3</th>
            <th>Note</th>
            <th>Sector 4</th>
            <th>Note</th>
            <th>Sector 5</th>
            <th>Note</th>
            <th>Sector</th>
            <th>Note</th>
            <th>Total sales</th>
            <th>Note</th>
            <th>Market</th>
            <th>Note</th>
            <th>Market</th>
            <th>Note</th>
            <th>Total sales</th>
            <th>Note</th>
        </tr>
    </thead>
    <tbody>
                        <tr class="even row-selectable">
            <td>276</td>
            <td>Boliden AB</td>
            <td>2015</td>
            <td></td>
            <td>Nasdaq OMX Nordic</td>
            <td title="Metals company active in exploration, mining, smelting and recycling">Metals company active in exploration, mining, smelting and recycling</td>
            <td>Basic Materials</td>
            <td>Industrial Metals &amp;amp; Minerals</td>
            <td>Commodity</td>
            <td title=""></td>
            <td>Direct </td>
            <td title=""></td>
            <td>Production model</td>
            <td title="Boliden operates five mining areas and five smelters in Sweden, Norway, Finland and Ireland">Boliden operates five mining areas and five smelters in Sweden, Norway, Finland and Ireland</td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td class="align-right">100.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td class="align-right">0.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td>X</td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td>Basic Materials</td>
            <td title="Important direct customers are steel companies and manufacturers of wire rod, copper rods and copper alloys. Important end markets include construction, infrastructure, automotive and consumer electronics (Industrials, Consumer Cyclical, Technology)">Important direct customers are steel companies and manufacturers of wire rod, copper rods and copper ...</td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td>Basic Materials</td>
            <td title=""></td>
            <td class="align-right">100.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td>Europe</td>
            <td title=""></td>
            <td>Germany</td>
            <td title=""></td>
            <td class="align-right">34.00 %</td>
            <td title=""></td>
            <td class="td-timestamp">2016-12-15 13:41:36</td>
            <td class="td-actions">
                <a href="http://wisall.dev/backend/companyedit/276">Edit</a>&nbsp;&amp;amp;nbsp
                <a href="http://wisall.dev/backend/companydel/276">Delete</a>
            </td>
            <td>Boliden AB</td>
            <td>276</td>
        </tr>
                <tr class="odd row-selectable">
            <td>277</td>
            <td>Brd. Klee B A/S</td>
            <td>2014/2015</td>
            <td></td>
            <td>Nasdaq OMX Nordic</td>
            <td title="Engineering and trading company">Engineering and trading company</td>
            <td>Industrials</td>
            <td>Diversified Industrials</td>
            <td>Reseller </td>
            <td title=""></td>
            <td>Combination</td>
            <td title="The Group sells directly to large customers/certain customer groups as well as through a network of distributors">The Group sells directly to large customers/certain customer groups as well as through a network of  ...</td>
            <td>Trading and commission </td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td class="align-right">100.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td class="align-right">0.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td>X</td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td>Industrials</td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td>Industrials</td>
            <td title=""></td>
            <td class="align-right">100.00 %</td>
            <td title=""></td>
            <td>Denmark</td>
            <td title=""></td>
            <td>Denmark</td>
            <td title=""></td>
            <td class="align-right">100.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td class="td-timestamp">2016-12-15 13:41:36</td>
            <td class="td-actions">
                <a href="http://wisall.dev/backend/companyedit/277">Edit</a>&nbsp;&amp;amp;nbsp
                <a href="http://wisall.dev/backend/companydel/277">Delete</a>
            </td>
            <td>Brd. Klee B A/S</td>
            <td>277</td>
        </tr>
                <tr class="even row-selectable">
            <td>278</td>
            <td>Brdr. A &amp;amp; O Johansen prГ¦f. A/S</td>
            <td>2015</td>
            <td></td>
            <td>Nasdaq OMX Nordic</td>
            <td title="Wholesale of technical installation and building materials">Wholesale of technical installation and building materials</td>
            <td>Industrials</td>
            <td>Industrial Distribution</td>
            <td>Reseller </td>
            <td title=""></td>
            <td>Direct </td>
            <td title=""></td>
            <td>Trading and commission </td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td>E-commerce</td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td class="align-right">100.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td class="align-right">0.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td>X</td>
            <td title=""></td>
            <td>X</td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td>Industrials</td>
            <td title="Construction industry">Construction industry</td>
            <td>Consumer Cyclical</td>
            <td title="Construction industry">Construction industry</td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title="Construction industry, i.e. Industrials (non-residential construction) and Consumer cyclical (residential construction)">Construction industry, i.e. Industrials (non-residential construction) and Consumer cyclical (reside ...</td>
            <td class="align-right">100.00 %</td>
            <td title=""></td>
            <td>Denmark</td>
            <td title=""></td>
            <td>Denmark</td>
            <td title=""></td>
            <td class="align-right">90.00 %</td>
            <td title=""></td>
            <td class="td-timestamp">2016-12-15 13:41:36</td>
            <td class="td-actions">
                <a href="http://wisall.dev/backend/companyedit/278">Edit</a>&nbsp;&amp;amp;nbsp
                <a href="http://wisall.dev/backend/companydel/278">Delete</a>
            </td>
            <td>Brdr. A &amp;amp; O Johansen prГ¦f. A/S</td>
            <td>278</td>
        </tr>
                <tr class="odd row-selectable">
            <td>279</td>
            <td>Bufab AB</td>
            <td>2015</td>
            <td></td>
            <td>Nasdaq OMX Nordic</td>
            <td title="Trading company focusing on C-Parts (screws, nuts etc)">Trading company focusing on C-Parts (screws, nuts etc)</td>
            <td>Industrials</td>
            <td>Industrial Distribution</td>
            <td>Reseller </td>
            <td title="Some parts are produced in-house. Hence partly also &amp;amp;quot;Commodity&amp;amp;quot; or &amp;amp;quot;Product owner&amp;amp;quot;, depending on the assessed degree of product diversification">Some parts are produced in-house. Hence partly also "Commodity" or "Product owner", depending on the ...</td>
            <td>Direct </td>
            <td title=""></td>
            <td>Trading and commission </td>
            <td title=""></td>
            <td>Production model</td>
            <td title="As a complement to its trading activities, Bufab also manufactures some C-Parts in-house at two facilities in Sweden and one in the UK">As a complement to its trading activities, Bufab also manufactures some C-Parts in-house at two faci ...</td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td class="align-right">100.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td class="align-right">0.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td>X</td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title="Including various manufacturing industries, the technology sector, electronics/telecommunications, consumer goods, the offshore and refining industry, the transportation and construction sectors, furniture and the automotive sector">Including various manufacturing industries, the technology sector, electronics/telecommunications, c ...</td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td class="align-right"></td>
            <td title=""></td>
            <td>International</td>
            <td title=""></td>
            <td>Sweden</td>
            <td title=""></td>
            <td class="align-right">38.00 %</td>
            <td title=""></td>
            <td class="td-timestamp">2016-12-15 13:41:36</td>
            <td class="td-actions">
                <a href="http://wisall.dev/backend/companyedit/279">Edit</a>&nbsp;&amp;amp;nbsp
                <a href="http://wisall.dev/backend/companydel/279">Delete</a>
            </td>
            <td>Bufab AB</td>
            <td>279</td>
        </tr>
                <tr class="even row-selectable">
            <td>280</td>
            <td>Byggmax Group AB</td>
            <td>2015</td>
            <td></td>
            <td>Nasdaq OMX Nordic</td>
            <td title="Discount building materials retailer">Discount building materials retailer</td>
            <td>Consumer Cyclical</td>
            <td>Home Improvement Stores</td>
            <td>Reseller </td>
            <td title=""></td>
            <td>Direct </td>
            <td title=""></td>
            <td>Trading and commission </td>
            <td title="No own factories, purchases goods from independent suppliers, primarily in the Nordic region, but also from other European countries and Asia">No own factories, purchases goods from independent suppliers, primarily in the Nordic region, but al ...</td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td>E-commerce</td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td class="align-right">100.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td class="align-right">0.00 %</td>
            <td title="Assumed, not explicitly stated">Assumed, not explicitly stated</td>
            <td>X</td>
            <td title=""></td>
            <td>X</td>
            <td title="B2C represent approx. 80% of sales, the remaing 20% is professional craftsmen">B2C represent approx. 80% of sales, the remaing 20% is professional craftsmen</td>
            <td></td>
            <td title=""></td>
            <td>Consumer Cyclical</td>
            <td title="Professional craftsmen">Professional craftsmen</td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td></td>
            <td title=""></td>
            <td>Consumer Cyclical</td>
            <td title=""></td>
            <td class="align-right">20.00 %</td>
            <td title="The remaining revenue (80%) is generated from the group's B2C operations">The remaining revenue (80%) is generated from the group's B2C operations</td>
            <td>Nordics</td>
            <td title=""></td>
            <td>Sweden</td>
            <td title=""></td>
            <td class="align-right">74.00 %</td>
            <td title=""></td>
            <td class="td-timestamp">2016-12-15 13:41:36</td>
            <td class="td-actions">
                <a href="http://wisall.dev/backend/companyedit/280">Edit</a>&nbsp;&amp;amp;nbsp
                <a href="http://wisall.dev/backend/companydel/280">Delete</a>
            </td>
            <td>Byggmax Group AB</td>
            <td>280</td>
        </tr>
                    </tbody>
</table>
</div>
А вот ксс к ней.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
* {
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    color: #444;
}
a, img {
    outline: none;
}
a img {
    border: none;
}
.align-right {
    text-align: right;
}
table {
    border-spacing: 0px 5px;
}
table th, table td {
    padding: 0 5px;
    vertical-align: top;
}
.list-wrap {
    width: 100%;
    overflow-x: auto;
}
.list {
    border-spacing: 1px;
}
.list * {
    font-size: 13px;
}
.list th {
    background-color: #bbb
}
.list td {
    white-space: nowrap;
}
.list th, .list td {
    padding: 2px 5px;
}
.list .even td {
    background-color: #eee;
}
.list .odd td {
    background-color: #ddd;
}
.list .row-selectable:hover td {
    background-color: #aaf;
    color: #000 !important;
}
.list .td-nodata {
    text-align: center;
}
.td-timestamp {
    width: 130px;
}
.td-actions {
    width: 80px;
}
В принципе, решение на js тоже подошлобы, но лучше на css/html.
Вопрос: При прокрутке вниз блок убирается а если прокрутить вверх то появляется

Вот на сайте шапка так организована как сделать что б убиралась шапка если прокрутка вниз но появлялась если прокрутка вверх?

Добавлено через 7 минут
тоесть при прокрутке меняется класс к прмеру если вниз покрутим то прибавится класс который скрывает
Javascript
1
2
3
4
5
6
$(document).on('scroll', function(){
var scroll_top = $(document).scrollTop();
if(scroll_top >= 100){
$('header').addClass('active')
}else{ $('header').removeClass('active');}
})
Но получается нужен ещё 1 скрипт похожый который при прокрутке вверх(а не вниз) будет менять класс.Что изменить?может scrollTop(); на scrollDown или что-то типа того помогите плиз.
Ответ: Проверку прокрутки можно так сделать:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // код для прокрутки вниз
       $('header').removeClass('active');
   } else {
      // код для прокрутки вверх
      $('header').addClass('active');
   }
   lastScrollTop = st;
});
Вопрос: Исчезающая шапка при прокрутке страницы

Привет всем.

Столкнулся с проблемкой, нужна помощь знающих людей.

Хочу реализовать плавноисчезающую шапку по мере прокрутки страницы (примерно как в приложении Google Play для андройда), но нагуглить такой скрипт не удается.
Сам я в скриптинге не силен.
Пожалуйста помогите решить эту задачу.

У нас есть шапка div с привязанным к ней классом - "name", нужно сделать так, что бы по мере прокрутки страницы данный блок менял свою opacity ближе к нулю (аналогично по мере возвращения страницы к верху opacity меняется ближе к 1). Хотелось бы что бы данный скрипт работал в мобильных браузерах так же хорошо как и в компьютерных.

Хороший пример подобной шапочки есть тут:


заранее спасибо всем кто поможет
Ответ: russia091, извиняюсь, это я немного напутал.

window.addEventListener('DOMContentLoaded', function() {
	var elem = document.querySelector('.name'),
		content = document.querySelector('.content');

	content.addEventListener('scroll', function() {
		elem.style.opacity = 1 - 1 / (this.scrollHeight - this.clientHeight) * this.scrollTop;
	});
});
Вопрос: Фиксировать шапку таблицы и первый столбец

Наверное уже очень заезженная тема, много топиков есть, но подходящий ответ так и не смог найти.
Подтолкните кто знает:

Есть огромная таблица, которая генерируется приложением.
Поэтому в самой структуре страницы ничего написать не получиться. Но можно проставлять классы и idшники на нужные объекты.
А так же подгружать нужные css и js скрипты.

У кого нибудь есть подходящий css, чтобы через него можно было зафиксить шапку и первый столбец?

Нашел хорошее и простое решение.
Оно в принципе работает правильно для малого кол-ва столбцов, но когда таблица имеет 30-40 столбцов, то заголовок начинает плавать и не совпадать со столбцами. Где здесь ошибка?

Нормальный кейс:
<html>                                                                  
<head>      
 <style>
.table-fixed-head {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  height: 100vh;
}

.table-fixed-head th,
.table-fixed-head td {
  padding: 5px;
  text-align: center;
  width: 33.333vw;
}

.table-fixed-head thead {
  background-color: #333;
  color: #FDFDFD;
}

.table-fixed-head thead tr {
  display: block;
  position: relative;
}

.table-fixed-head tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: calc(100vh - 30px);
}

.table-fixed-head tbody tr:nth-child(even) {
  background-color: #DDD;
}
</style>               
</script>                                                        
</head>                                                                 

<table class="table-fixed-head">
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

          
</body>
</html>


И ВОТ МОЙ не нормальный кейс:
<html>                                                                  
<head>      
 <style>
.table-fixed-head {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  height: 100vh;
}

.table-fixed-head th,
.table-fixed-head td {
  padding: 5px;
  text-align: center;
  width: 33.333vw;
}

.table-fixed-head thead {
  background-color: #333;
  color: #FDFDFD;
}

.table-fixed-head thead tr {
  display: block;
  position: relative;
}

.table-fixed-head tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: calc(100vh - 30px);
}

.table-fixed-head tbody tr:nth-child(even) {
  background-color: #DDD;
}
</style>               
</script>                                                        
</head>                                                                 

<table class="table-fixed-head">
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Здесь представлены разные таблицы и ситуации. Но функция для фиксирования заголовков/столбцов универсальная. <button onclick="FixAction(this)">большая кнопка</button></th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Здесь представлены разные таблицы и ситуации. Но функция для фиксирования заголовков/столбцов универсальная. <button onclick="FixAction(this)">большая кнопка</button></th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Здесь представлены разные таблицы и ситуации. Но функция для фиксирования заголовков/столбцов универсальная. <button onclick="FixAction(this)">большая кнопка</button></th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Здесь представлены разные таблицы и ситуации. Но функция для фиксирования заголовков/столбцов универсальная. <button onclick="test(this)">большая кнопка</button></th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Title 3</th>
      <th>Title 3</th>	  
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>много много много много много много много много много много много текста</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>	  
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>	  
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>много много много много много текста</td>
      <td>2</td>
      <td>много много много много много текста</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

          
</body>
</html>
Ответ: dimyaz,
покажи код
Вопрос: Как убрать прокрутку?

Доброго дня!
при размещении элемента в центре страницы, создается ненужная прокрутка экрана. снизу и справа, хотя по идее прокручивать нечего. проверял на разных экранах, везде тоже самое.
можно ли её как-то убрать?
код css прилагаю
CODE (html):

  1. #outer {
  2.     height:100%;
  3.     width:100%;
  4.     position:absolute;
  5.     text-align: center;
  6. }
  7.  
  8. #before {
  9.  
  10.     display: inline-block;
  11.     height: 100%;
  12.     vertical-align: middle;
  13. }
  14.  
  15. #inner {
  16.     display: inline-block;
  17.     vertical-align: middle;
  18.     border:1px solid red;
  19. }

Прикреплено изображение (Нажмите для увеличения)

Ответ:
[quote=DeertOff][/quote]
Друг, у меня опять аналогичная проблема. опять вылазит прокрутка экрана. подскажи как убрать? но раньше у меня была прокрутка с двух сторон, то теперь только вертикали
вот код
CODE (htmlphp):

  1. body {
  2.     background: black;
  3.    
  4. }
  5.  
  6. {
  7.   background: yellow;
  8.   height: 100px;
  9.   margin-bottom: 10px;
  10.   border: 10px solid crimson;
  11. }
  12.  
  13. main {
  14.   background: green;
  15.   margin-bottom: 10px;
  16. }
  17.  
  18. .left {
  19.   background: blue;
  20.   width: 250px;
  21.   height: 800px;
  22.   float: left;
  23. }
  24.  
  25. .center {
  26.   background: orange;
  27.   height: 800px;
  28.   margin: 0 0 0 250px;
  29. }
  30.  
  31. .right {
  32.   background: aqua;
  33.   width: 160px;
  34.   height: 800px;
  35.   float: right;
  36. }
  37.  
  38. footer {
  39.   background: red;
  40.   height: 80px;
  41.  
  42. }

Прикреплено изображение (Нажмите для увеличения)

(Отредактировано автором: 06 Сентября, 2016 - 19:10:08)

Вопрос: Как закрепить шапку в двухколонном макете

Доброго времени суток,

Помогите, пожалуйста, новичку с, наверное, несложным вопросом.
Как можно закрепить шапку в двухколонном макете, наподобие того, что описан здесь:



Если с левой колонкой вопросов не возникло (position: fixed), то вот как закрепить ещё и шапку, оставив прокрутку только текста, который справа, не понял.
Ответ: Если я правильно понял, то попробуйте данный вариант, здесь как раз зафиксированая шапка хедера:
Левую колонку не фиксировал, раз у вас нет с этим проблемы.
HTML5
1
2
3
4
5
6
7
<div class="row wrapper">
    <header><div class="row header">header</div></header>
    <div class="row container">
        <div class="left-column columns">left column</div>
        <div class="right-column columns">right column</div>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
* {
    box-sizing: border-box;
}
 
body {
    background: #dfdfdf;
}
 
.wrapper {
    padding: 4rem 0 0 0;
    position: relative;
}
 
.row {
    max-width: 780px;
    margin: 0 auto;
}
 
header {
    border: 1px red solid;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: white;
}
 
.header {
    border: 1px black solid;
}
 
.container {
    min-height: 500px;
    border: 1px red solid;
}
 
.columns {
    float: left;
    padding: 0.4rem 1rem;
}
 
.left-column {
    width: 33%;
    min-height: 300px;
    border: 1px black solid;
}
 
.right-column {
    width: 67%;
    min-height: 300px;
    border: 1px black solid;
}