Фиксация первой строки если ширина не известна

260
05 мая 2017, 15:41

Добрый день!

У меня есть таблица из блоков div. Первая строка - заголовок. При попытке зафиксировать её с помощью position:fixed ширина всего заголовка и столбцов соответственно не совпадает с дальнейшим содержимым таблицы.

Никак не соображу как же её зафиксировать, наверняка кто-то уже сталкивался со схожей проблемой, очень прошу помочь!

/* ОБЩИЕ СТИЛИ */ 
body { 
  background: #fff; 
  padding: 0 0 0 0; 
  font-size: 12px; 
  color:#141615; 
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif 
} 
a { 
  text-decoration:none; 
  color:#0074af; 
} 
/* КОНЕЦ ОБЩИХ СТИЛЕЙ */ 
 
/* ФОРМЫ ДЛЯ ЗАГОЛОВКА */ 
.form { 
  margin-top: 10px; 
} 
.form .form-group { 
  position: relative; 
  display: inline-block; 
} 
.form .form-control { 
  background: none; 
  border:none; 
/*  border-bottom: 1px solid #fff;*/ 
  border-radius: 0; 
  box-shadow: none; 
  color: white; 
  width:110px; 
  padding:0; 
} 
.caldate { 
  max-width:80px; 
} 
.form .form-control:focus, .form .form-control:valid { 
  outline: 0; 
} 
.form .form-control:focus + label, .form .form-control:valid + label { 
  top: -15px; 
  font-size: 10px; 
} 
.form .form-control:focus + label .labelimg, .form .form-control:valid + label .labelimg { 
  display: none; 
} 
.form label { 
  position: absolute; 
  left: 5px; 
  top: -2px; 
  pointer-events: none; 
  transition: all .2s ease; 
  word-break:break-all; 
} 
 
.form label span .labelimg { 
  margin-top: -4px; 
  width: 15px; 
  height: 15px; 
  cursor: pointer; 
} 
 
.form-diapazon label span .labelimg { 
  margin-top: 2px; 
  width: 15px; 
  height: 15px; 
} 
 
.icosort { 
  width: 15px; 
  height: 15px; 
  margin-top: 2px; 
} 
 
#clear-filter { 
  font-size:9px; 
  font-weight:10; 
  color:#6caed0; 
  border-bottom: 1px dotted #6caed0; 
} 
 
#clear-filter:hover { 
  text-decoration:none; 
  border-bottom: 1px dotted #fff; 
  color:#fff; 
} 
/* КОНЕЦ ФОРМ ДЛЯ ЗАГОЛОВКА */ 
 
/* ЧЕКБОКСЫ */ 
.checkbox, .radiobutton { 
    display: none; 
} 
.checkbox-custom, .radiobutton-custom { 
  position: relative;      /* Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */ 
  border-radius: 3px; 
  margin-top:2px; 
  margin-bottom:2px; 
} 
.checkbox-custom, .radiobutton-custom, .label { 
    display: inline-block; 
    vertical-align: middle; 
} 
.checkbox:checked + .checkbox-custom::before { 
    content: "";             /* Добавляем наш псевдоэлемент */ 
    display: block;          /* Делаем его блочным элементом */ 
    position: absolute;      /* Позиционируем его абсолютным образом */ 
 
     /* Задаем расстояние от верхней, правой, нижней и левой границы */ 
    top: 2px; 
    right: 2px; 
    bottom: 2px; 
    left: 2px; 
} 
.white { 
  border: 2px solid #fff; 
} 
.red { 
  border: 2px solid #dd2a1b; 
} 
.blue { 
  border: 2px solid #0074af; 
} 
.small { 
  width: 20px;             /* Обязательно задаем ширину */ 
  height: 20px;            /* Обязательно задаем высоту */ 
} 
.big { 
  width: 23px;             /* Обязательно задаем ширину */ 
  height: 23px;            /* Обязательно задаем высоту */ 
  margin-left:12px;		 /* Делаем чекбокс по центру строки */ 
} 
.fat-red { 
  border: 3px solid #dd2a1b; 
  width:21px; 
  height:21px; 
  margin-left:12px;		 /* Делаем чекбокс по центру строки */ 
} 
.checkbox:checked + .white::before { 
  background: #fff; 
  border-radius: 2px; 
} 
.checkbox:checked + .red::before { 
  background: #dd2a1b; 
  border-radius: 2px; 
} 
.checkbox:checked + .blue::before { 
  background: #0074af; 
  border-radius: 2px; 
} 
/* КОНЕЦ ЧЕКБОКСЫ */ 
 
/* ВСПЛЫВАЮЩАЯ ПОДСКАЗКА С КОНТАКТНОЙ ИНФОРМАЦИЕЙ */ 
.tooltip99 { 
  position: relative; 
  white-space: nowrap; 
} 
.tooltip99 span { 
  display:none; 
} 
.tooltip99:hover span { 
  display:block; 
  border-radius: 4px 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;  
  position: absolute; 
  left: 1em; 
  top: 2em; 
  z-index: 999; 
  margin-left: 0; 
  margin-top:-10px; 
  width: 280px; 
  transition: all 1.2s ease; 
} 
.tooltipclassic { 
  padding: 0.8em 1em; 
  background: #fff; 
  border: 1px solid #c6e2ff; 
  box-shadow: 0 0 10px rgba(0,0,0,0.5); 
} 
.tooltiptable { 
  width:255px; 
  background: none; 
} 
.tooltiptable tr, .tooltiptable td { 
  background: #fff; 
} 
.tooltiptable th { 
  text-transform:uppercase; 
  text-align:left; 
} 
.tooltiptable th:hover { 
  background: #fff; 
} 
.tooltiptableico { 
  width:30px; 
} 
.tooltip99 a { 
  font-size:14px; 
    } 
/* КОНЕЦ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ С КОНТАКТНОЙ ИНФОРМАЦИЕЙ */ 
 
/* ТАБЛИЦА */ 
.divTable{ 
  display: table; 
  width: 100%; 
  float:left; 
  margin-left:50px; 
  padding-bottom:100px; 
  margin-top:-8px; 
} 
.otstup { 
  padding-top:10px; 
} 
.divTableRow { 
  display: table-row; 
} 
.divTableHeading { 
  background-color: #0074af; 
  display: table-header-group; 
} 
.divTableCell, .divTableHead { 
  border: 1px solid #e3e3e3; 
  display: table-cell; 
  padding: 3px 10px; 
} 
.divTableBody { 
  display: table-row-group; 
} 
#zagolovok { 
  background: #0074af; 
  color:#fff; 
  white-space: nowrap; 
} 
 
#zagolovok div:first-child { 
  border-radius:4px 0 0 0; 
} 
 
#zagolovok div:last-child { 
    border-radius:0 4px 0 0; 
} 
.divblue { 
  background-color:#ddedff; 
} 
.divwhite { 
  background-color:#fff; 
} 
#prosrochka:hover { 
  background-color:#fdcfcc; 
  transition: all .5s ease; 
  transition-delay: 0.5s; 
   -webkit-transition: 0.5s ease-out; 
     -webkit-transition-delay: 0.5s; 
     -o-transition: 0.5s ease-out; 
     -o-transition-delay: 0.5s; 
     -moz-transition: 0.5s ease-out; 
     -moz-transition-delay: 0.5s; 
} 
.divTableRow:hover { 
  background-color:#b3daff; 
  transition: all 0.5s ease; 
  transition-delay: 0.5s; 
   -webkit-transition: 0.5s ease-out; 
     -webkit-transition-delay: 0.5s; 
     -o-transition: 0.5s ease-out; 
     -o-transition-delay: 0.5s; 
     -moz-transition: 0.5s ease-out; 
     -moz-transition-delay: 0.5s; 
} 
.tableright { 
  text-align:right; 
  white-space: nowrap; 
} 
/* КОНЕЦ таблицы */
<div class="divTable"> 
<div class="divTableBody"> 
<div class="divTableRow" id="zagolovok"> 
<div class="divTableCell"> 
<label><input type="checkbox" class="checkbox" tabindex="1"><span class="checkbox-custom white small" title="Выбрать все"></span></label> 
<label><input type="checkbox" class="checkbox" tabindex="2"><span class="checkbox-custom red small" title="Просроченные"></span></label> 
</div> 
 
<div class="divTableCell"> 
<div class="form"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <div class="form-group"> 
<input type="text" class="form-control caldate tcal" tabindex="3" required> 
<label>Дата заказа <!--<span><img src="img/calendar-diapazon-white.png" class="labelimg"></span>--></label> 
</div> 
<br><a href title="Очистить фильтр" id="clear-filter">очистить фильтр</a> 
</div> 
</div> 
 
<div class="divTableCell"> 
<div class="form"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <div class="form-group"> 
<input type="text" class="form-control caldate tcal" tabindex="4" required> 
<label>Дата поставки <!--<span><img src="img/calendar-diapazon-white.png" class="labelimg"></span>--></label> 
</div> 
<br><a href title="Очистить фильтр" id="clear-filter">очистить фильтр</a> 
</div> 
</div> 
 
<div class="divTableCell"><div class="form"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <div class="form-group"> 
    <input class="form-control caldate" type="text" tabindex="5" required> 
    <label>Референс <span><img src="img/search-white.png" class="labelimg"></span></label> 
</div> 
<br><a href title="Очистить фильтр" id="clear-filter">очистить фильтр</a></div></div> 
<div class="divTableCell"><div class="form"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <div class="form-group"> 
    <input class="form-control" type="text" tabindex="6" required> 
    <label>Поставщик <span><img src="img/search-white.png" class="labelimg"></span></label> 
</div> 
<br><a href title="Очистить фильтр" id="clear-filter">очистить фильтр</a></div></div> 
<div class="divTableCell"><div class="form"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <div class="form-group"> 
    <input class="form-control" type="text" tabindex="7" required> 
    <label>Производитель <span><img src="img/search-white.png" class="labelimg"></span></label> 
</div> 
<br><a href title="Очистить фильтр" id="clear-filter">очистить фильтр</a></div></div> 
<div class="divTableCell"><div class="form"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <div class="form-group"> 
    <input class="form-control" type="text" tabindex="8" required> 
    <label>Артикул <span><img src="img/search-white.png" class="labelimg"></span></label> 
</div> 
<br><a href title="Очистить фильтр" id="clear-filter">очистить фильтр</a></div></div> 
<div class="divTableCell"><div class="form"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <div class="form-group"> 
    <input class="form-control" type="text" tabindex="9" required> 
    <label>Наименование <span><img src="img/search-white.png" class="labelimg"></span></label> 
</div> 
<br><a href title="Очистить фильтр" id="clear-filter">очистить фильтр</a></div></div> 
<div class="divTableCell"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <label>Кол-во</label></div> 
<div class="divTableCell tablerightt"> 
  <a href="#" title="Сортировка" class="asrot"><img src="img/sort-white.png" class="icosort"></a> 
  <label>Цена</label></div> 
</div> 
 
<div class="otstup"></div> 
 
<div class="divTableRow"> 
<div class="divTableCell"><label><input type="checkbox" class="checkbox"><span class="checkbox-custom blue big"></span></label></div> 
<div class="divTableCell">27.04.2017</div> 
<div class="divTableCell">28.04.2017</div> 
<div class="divTableCell">118725-31521</div> 
<div class="divTableCell"><div class="tooltip99"><a href="#">ZSDV Рольф Полюстрово</a> 
<span class="tooltipclassic"> 
<table class="tooltiptable"> 
<th colspan="2">ZSDV Рольф Полюстрово</th> 
<tr><td class="tooltiptableico"><img src="img/man-mini-ico.png" width="15px" /></td><td>Бритченко Владимир </td></tr> 
<tr><td class="tooltiptableico"><img src="img/phone-mini-ico.png" width="15px" /></td><td>8-916-128-12-35</td></tr> 
<tr><td class="tooltiptableico"><img src="img/mail-mini-ico.png" width="15px" /></td><td><a href="mailto:Vladimir.Britchenko@abs-auto.ru" title="Написать письмо">Vladimir.Britchenko@abs-auto.ru</a></td></tr> 
</table> 
</span> 
</div></div> 
<div class="divTableCell">MOBIS/HYUNDAI/KIA</div> 
<div class="divTableCell">ZA44BWD02ACA9601E</div> 
<div class="divTableCell">ПЛЕНКА ЗАЩИТНАЯ БОКОВОЙ НАКЛАДНАЯ ПЛЕНКА ЗАЩИТНАЯ БОКОВОЙ БОКОВОЙ НАКЛАДНАЯ</div> 
<div class="divTableCell tableright">9 999</div> 
<div class="divTableCell tableright">1 256 878, 00</div> 
</div> 
 
<div class="divTableRow"> 
<div class="divTableCell"><label><input type="checkbox" class="checkbox"><span class="checkbox-custom blue big"></span></label></div> 
<div class="divTableCell">27.04.2017</div> 
<div class="divTableCell">28.04.2017</div> 
<div class="divTableCell">118725-31521</div> 
<div class="divTableCell"><div class="tooltip99"><a href="#">ZSDV Рольф Полюстрово</a> 
<span class="tooltipclassic"> 
<table class="tooltiptable"> 
<th colspan="2">ZSDV Рольф Полюстрово</th> 
<tr><td class="tooltiptableico"><img src="img/man-mini-ico.png" width="15px" /></td><td>Бритченко Владимир </td></tr> 
<tr><td class="tooltiptableico"><img src="img/phone-mini-ico.png" width="15px" /></td><td>8-916-128-12-35</td></tr> 
<tr><td class="tooltiptableico"><img src="img/mail-mini-ico.png" width="15px" /></td><td><a href="mailto:Vladimir.Britchenko@abs-auto.ru" title="Написать письмо">Vladimir.Britchenko@abs-auto.ru</a></td></tr> 
</table> 
</span> 
</div></div> 
<div class="divTableCell">MOBIS/HYUNDAI/KIA</div> 
<div class="divTableCell">ZA44BWD02ACA9601E</div> 
<div class="divTableCell">ПЛЕНКА ЗАЩИТНАЯ БОКОВОЙ НАКЛАДНАЯ</div> 
<div class="divTableCell tableright">9 999</div> 
<div class="divTableCell tableright">1 256 878, 00</div> 
</div> 
 
</div> 
</div>

Answer 1

В сети нашел такое довольно изящное решение.

Смысл такой: мы дублируем заголовок таблицы в <div> и его фиксируем position: absolute; и фиксируем по верху (top:0). Поскольку у заголовка таблицы и у самой таблицы position: static; то координаты рассчитываются относительно блока со скролом (в данном случае section, может быть и body). 

html, body{ 
  margin:0; 
  padding:0; 
  height:100%; 
} 
section { 
  position: relative; 
  border: 1px solid #000; 
  padding-top: 37px; 
  background: #500; 
} 
section.positioned { 
  position: absolute; 
  top:100px; 
  left:100px; 
  width:800px; 
  box-shadow: 0 0 15px #333; 
} 
.container { 
  overflow-y: auto; 
  height: 180px; 
} 
table { 
  border-spacing: 0; 
  width:100%; 
} 
td + td { 
  border-left:1px solid #eee; 
} 
td, th { 
  border-bottom:1px solid #eee; 
  background: #ddd; 
  color: #000; 
  padding: 10px 25px; 
} 
th { 
  height: 0; 
  line-height: 0; 
  padding-top: 0; 
  padding-bottom: 0; 
  color: transparent; 
  border: none; 
  white-space: nowrap; 
} 
th div{ 
  position: absolute; 
  background: transparent; 
  color: #fff; 
  padding: 9px 25px; 
  top: 0; 
  margin-left: -25px; 
  line-height: normal; 
  border-left: 1px solid #800; 
} 
th:first-child div{ 
  border: none; 
}
<section class=""> 
  <div class="container"> 
    <table> 
      <thead> 
        <tr class="header"> 
          <th> 
            Table attribute name 
            <div>Table attribute name</div> 
          </th> 
          <th> 
            Value 
            <div>Value</div> 
          </th> 
          <th> 
            Description 
            <div>Description</div> 
          </th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td>align</td> 
          <td>left, center, right</td> 
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> 
        </tr> 
        <tr> 
          <td>bgcolor</td> 
          <td>rgb(x,x,x), #xxxxxx, colorname</td> 
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> 
        </tr> 
        <tr> 
          <td>border</td> 
          <td>1,""</td> 
          <td>Specifies whether the table cells should have borders or not</td> 
        </tr> 
        <tr> 
          <td>cellpadding</td> 
          <td>pixels</td> 
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td> 
        </tr> 
        <tr> 
          <td>cellspacing</td> 
          <td>pixels</td> 
          <td>Not supported in HTML5. Specifies the space between cells</td> 
        </tr> 
        <tr> 
          <td>frame</td> 
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> 
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td> 
        </tr> 
        <tr> 
          <td>rules</td> 
          <td>none, groups, rows, cols, all</td> 
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td> 
        </tr> 
        <tr> 
          <td>summary</td> 
          <td>text</td> 
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td> 
        </tr> 
        <tr> 
          <td>width</td> 
          <td>pixels, %</td> 
          <td>Not supported in HTML5. Specifies the width of a table</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</section>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте optima-pr.com.ua
ТОП-10
READ ALSO
Почему не передается изображение в canvas?
HTML

Почему не передается изображение в canvas?

Не получается передать image в canvasНе понимаю в чем проблема

 225
Как закрыть меню Bootstrap при нажатии на ссылку?
HTML

Как закрыть меню Bootstrap при нажатии на ссылку?

Доброго времени суток! Имеется меню BootstrapНужен скрипт который будет закрывать меню Bootstrap и возвращать обратный цвет background кнопки до её нажатия...

 376
С# как воспроизвести MPEG-2 TS?
c#

С# как воспроизвести MPEG-2 TS?

Пробовал плеер на DirectX 10

 229
Страничный интерфейс или вкладки
c#

Страничный интерфейс или вкладки

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

 273