У меня довольно большая таблица, которая находится в фиксированном div, настроенном на переполнение. Это добавляет горизонтальную полосу прокрутки, что нормально, но я хотел бы иметь возможность перетаскивать свою таблицу в прокручиваемый div, поэтому в основном не просто полагаться на полосу прокрутки для прокрутки таблицы.

Мой (примерный) код:

.box {
  overflow-x: auto;
  overflow-y: hidden;
  width: 500px;
}
table {
  width: 100%;
}
table td,
table th {
  padding: 5px;
}
<div class="box">
  <table>
    <thead>
      <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
        <th>Column6</th>
        <th>Column7</th>
        <th>Column8</th>
        <th>Column9</th>
        <th>Column10</th>
        <th>Column11</th>
        <th>Column12</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
      </tr>
    </tbody>
  </table>
</div>

Я пробовал перетаскивать jquery, но не получил того же результата. Любые идеи относительно того, как этого добиться, с помощью css или jquery? В идеале я бы хотел сделать это только с помощью css, но я не уверен, возможно ли это. Контент необходимо перетаскивать только по горизонтали.

Fiddle: https://jsfiddle.net/41gv8y77/

jquery css
2
Wim Mertens 8 Сен 2016 в 08:00

3 ответа

Лучший ответ

Это возможно (как вы могли представить), но логически с помощью JavaScript , потому что CSS не зависит от перетаскивания (или лучше: события) .

Вот пример использования jQuery:

var mx;

$(".xDragScroll").on({
  mousemove: function(e) {
    var mx2 = e.pageX - this.offsetLeft;
    if(mx) this.scrollLeft = this.sx + mx - mx2;
  },
  mousedown: function(e) {
    this.sx = this.scrollLeft;
    mx = e.pageX - this.offsetLeft;
  }
});

$(document).on("mouseup", function(){
  mx = 0;
});

Вы также можете легко изменить или расширить приведенный выше сценарий для оси Y.

var mx = 0;

$(".drag").on({
  mousemove: function(e) {
    var mx2 = e.pageX - this.offsetLeft;
    if(mx) this.scrollLeft = this.sx + mx - mx2;
  },
  mousedown: function(e) {
    this.sx = this.scrollLeft;
    mx = e.pageX - this.offsetLeft;
  }
});

$(document).on("mouseup", function(){
  mx = 0;
});
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0; font:16px/20px sans-serif;}

.box {
  overflow-x: auto;
  overflow-y: hidden;
  width: 500px;
  margin:60px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;  
  -moz-user-select: none;   
  -ms-user-select: none;     
  user-select: none; 
}
table {
  width: 100%;
}
table td,
table th {
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box drag">
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
    </tr>
  </tbody>
</table>
</div>
7
Roko C. Buljan 9 Сен 2016 в 07:31

В чистом javascript (Vanilla)

var elementScroll = document.querySelector('.drag');
var mx = 0;

elementScroll.addEventListener("mousedown", function(e){
  this.sx = this.scrollLeft;
  mx = e.pageX - this.offsetLeft;

  this.addEventListener("mousemove", mouseMoveFunction);
});

elementScroll.addEventListener("mouseup", function(e){
  this.removeEventListener("mousemove", mouseMoveFunction);
  mx = 0;
});

function mouseMoveFunction(e){
  var mx2 = e.pageX - this.offsetLeft;
  if(mx) this.scrollLeft = this.sx + mx - mx2;
}
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0; font:16px/20px sans-serif;}

.box {
  overflow-x: auto;
  overflow-y: hidden;
  width: 500px;
  margin:60px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;  
  -moz-user-select: none;   
  -ms-user-select: none;     
  user-select: none; 
}
table {
  width: 100%;
}
table td,
table th {
  padding: 5px;
}
<div class="box drag">
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
    </tr>
  </tbody>
</table>
</div>
5
Luã Melo 5 Июл 2018 в 14:12

Вы также можете перетаскивать и прокручивать по вертикали. Чтобы заголовок оставался неизменным, вы можете создать клон таблицы и скрыть тело одной и скрыть заголовок другой.

var tableBody = document.getElementById('scrollDragable');
var headerTable = document.getElementById('scrollDragableHeader');
var curDown = false
var oldScrollLeft = 0;
var oldScrollTop = 0;
var curXPos = 0;
var curYPos = 0;

tableBody.addEventListener("mousemove", function(e) {
	if (curDown === true) {
  	tableBody.scrollLeft = oldScrollLeft + (curXPos - e.pageX);
    headerTable.scrollLeft = oldScrollLeft + (curXPos - e.pageX);
    tableBody.scrollTop = oldScrollTop + (curYPos - e.pageY);
  }
})

tableBody.addEventListener("mousedown", function(e) {
	curDown = true;
  curYPos = e.pageY;
  curXPos = e.pageX;
  oldScrollLeft = tableBody.scrollLeft;
  oldScrollTop = tableBody.scrollTop;
})

tableBody.addEventListener("mouseup", function(e) {
	curDown = false;
})

//Ensures the header scrolls when the user uses the scrollbar
tableBody.addEventListener("scroll", function(e) {
  	headerTable.scrollLeft = tableBody.scrollLeft;
})
#scrollDragable {
  width: auto;
  height: 600px;
  overflow-x: scroll;
  overflow-y: scroll;
  border: 1px solid #ccc;
  
  /* Prevent the text from highlighting when dragging */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#scrollDragableHeader {
  border: 1px solid #ccc;
  overflow-x: hidden;
  overflow-y: scroll;
  
  /* Prevent the text from highlighting when dragging */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<div id="scrollDragableHeader">
<!--Create a table and hide the body but show the header -->
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
      <th>Column13</th>
      <th>Column14</th>
      <th>Column15</th>
      <th>Column16</th>
      <th>Column17</th>
    </tr>
  </thead>
  <tbody hidden>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr> 
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>    
  </tbody>
</table>
</div>
<div id="scrollDragable">

<!--Create a clone of the table and hide the header and show the body-->
<table>
  <thead style="visibility:collapse;">
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
      <th>Column13</th>
      <th>Column14</th>
      <th>Column15</th>
      <th>Column16</th>
      <th>Column17</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>    
  </tbody>
</table>
</div>
1
s3nt1n3lz 9 Мар 2019 в 17:49

Похожие вопросы

30 Как я могу сделать div не больше его содержимого?
5 Каков наилучший способ сделать отступ текста в DIV при переносе?
29 Как выровнять содержимое div по нижнему краю
27 Как я могу центрировать текст (по горизонтали и вертикали) внутри блока div?
1 Изменить jQuery Mobile, чтобы заголовки отображались на 2 строки перед многоточием?
1 Отдельная обработка обернутых строк с помощью jQuery
10 Делаем div с вертикальной прокруткой с помощью CSS
2 Избегайте переноса строк без необходимости с помощью CSS
3 Bootstrap 3 прокручиваемый div для таблицы
2 Как я могу сделать так, чтобы мои тексты казались рядом и отзывчивыми?
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

1 как сделать холст подходящим для максимальной ширины модального столбца?
1 Получение неопределенности при попытке получить атрибут родительского поля
1 Нужна помощь в создании анимации при прокрутке вниз
1 Получение динамически добавляемой строки таблицы, выбранной из Javascript
2 Почему флажок не обновляется визуально после использования jQuery, чтобы снять его при нажатии «Нет» в модальном поле?
2 как добавить динамический JavaScript в динамически генерируемые элементы HTML?
1 Как найти значение в data-attr?
1 как получить идентификатор опции списка данных и назначить атрибуты входных данных
3 Как я могу сделать так, чтобы всплывающее окно элемента корзины Shopify оставалось видимым на неопределенный срок в тесте Google Optimize A/B?
1 Селектор jQuery для установки значения ввода на основе текущего контекста
Все вопросы по теме jquery >

jquery

jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript.  jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.

Подробнее про jquery...