2

Существует несколько таблиц. Требуется, чтобы две колонки td (в которых хранится текст "Заголовок 2") фиксировались при горизонтальном скроллинге.

.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #d9dde3;
  margin-bottom: 20px;
}
th {
  background: #e4e6eb;
  border: 1px solid #d9dde3;
  padding: 8px 15px;
  text-align: center;
  font-size: 13px;
}
.table tr:nth-child(odd) td {
  background: #f6f7f8;
}
td {
  background: #fff;
  border: 1px solid #d9dde3;
  padding: 15px;
  font-size: 14px;
}
<div>Таблица 1</div>
<table class="table">
  <thead>
    <tr>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
  </tbody>
</table>
<div>Таблица 2</div>
<table class="table">
  <thead>
    <tr>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
  </tbody>
</table>
<div>Таблица 3</div>
<table class="table">
  <thead>
    <tr>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td><b>Заголовок 2</b>
      </td>
      <td><b>Заголовок 2</b>
      </td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
  </tbody>
</table>

2 ответа 2

2

Используйте плагин, http://manos.malihu.gr/jquery-custom-content-scroller/ На сайте есть документация с описанием методов, можно решить ваши задачи с его помощью. Поддержка горизонтального скрола и фиксация о чем вы писали выше: mouseWheel:{ preventDefault: true }
Prevent the default behaviour which automatically scrolls the parent element when end or beginning of scrolling is reached (same bahavior with browser’s native scrollbar). Он не сложный, думаю разберетесь быстро.

0

Можно попробовать так:

.table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #d9dde3;
    margin-bottom: 20px;
}
th{
    background: #e4e6eb;
    border: 1px solid #d9dde3;
    padding: 8px 15px;
    text-align: center;
    font-size: 13px;
}
.table tr:nth-child(odd) td {
  background: #f6f7f8;
}
td{
    background: #fff;
    border: 1px solid #d9dde3;
    padding: 15px;
    font-size: 14px;
    height:50px;
}
#x{
  position: fixed;
  background:#fff;
}
#z{ 
  
  margin-left:220px;
}
<div style="display:relative">
  <div id="x" >
<table>
		<thead>
			<tr>
				<th>Заголовок</th>
				<th>Заголовок</th>
				
			</tr>
		</thead>
		<tbody>
			<tr>
				<td ><b>Заголовок 2</b></td>
				<td ><b>Заголовок 2</b></td>
				
			</tr>
      <tr>
				<td ><b>Заголовок 2</b></td>
				<td ><b>Заголовок 2</b></td>
			</tr>
      <tr>
				<td ><b>Заголовок 2</b></td>
				<td ><b>Заголовок 2</b></td>
			</tr>
		</tbody>
	</table>
    </div>
<div id="z" >
<table>
		<thead>
			<tr>
				<th>Заголовок</th>
				<th>Заголовок</th>
				<th>Заголовок</th>
				<th>Заголовок</th>
				<th>Заголовок</th>
				<th>Заголовок</th>
				<th>Заголовок</th>
				<th>Заголовок</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
			</tr>
      <tr>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
			</tr>
      <tr>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
				<td>Текст ячейки</td>
			</tr>
		</tbody>
	</table>
  </div>
  </div>

2
  • Ну тут 2 скрола, это не вариант, так как скролится будит сама страница по горизонтали, именно при скроле страницы фиксация должна быть. тут нужен JS, вот только я пока не понимаю как его правильно написать. Еще есть ньюанс тот что таблица по высоте может не влезть в экран и скролить нужно с учетом фиксации
    – Karalahti
    27 сен 2016 в 12:55
  • 1
    @Karalahti тогда так: jsfiddle.net/CRafT/jpqn9rp4/1
    – C.Raf.T
    27 сен 2016 в 13:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.