JSの挿入ページが長いテーブルに挿入される

Question

JavaScriptで作成される長いテーブルがあります。私は10行ごとにテーブルの中に改ページを挿入する方法があるのだろうと思っていた。 HTML行のインラインスタイルの場合、改ページが削除されることに気付きました。 複数のテーブルを作成する必要はありますか？ はここにあなたがより多くのコードを書くことなく、あなたがちょうど操作できるとき、それは不要ですので、そのギャップの高さを制御することはできませんので、私はミックスに<br>のような要素を導入していないでしょう https://jsfiddle.net/j1pqtjtv/3/

<table align="right" border="0" cellpadding="6" cellspacing="0" class="itemsTable"> 
      <tbody><tr class="itemsHeader"> 

       <th align="left">Information</th> 
       <th align="left" style="width:100px;">Price</th> 
       <th align="left" style="width:200px;">price</th> 


      </tr> 
      </tbody><tbody id="divDataLocalStorage" style="font-size:26px;"> 

       <tr> 

       </tr> 

      <tr><td class="item"></td><td></td><td></td></tr><tr><td class="item">xx</td><td>$59.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$59.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$67.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$67.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$69.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$76.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$76.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$78.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$88.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$99.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$109.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$114.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$119.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$125.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$133.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$135.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$141.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$143.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$146.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$149.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$152.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$154.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$166.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$183.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$188.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$188.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$197.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$270.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$278.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$291.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$351.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$353.13</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$362.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$378.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$474.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$488.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$511.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$596.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$613.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$630.77</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$642.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$648.57</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$663.08</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$695.14</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$731.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$753.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$788.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$792.74</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$903.71</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$965.98</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,137.42</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,210.77</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,281.54</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,315.71</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,335.22</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,513.69</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,568.34</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,765.62</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,772.31</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,010.03</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,085.02</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,106.15</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,199.35</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,270.52</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,461.45</td><td>$0.00</td></tr><tr><td class="item">xxM</td><td>$2,633.85</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,669.63</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,854.25</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$3,008.51</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$3,104.62</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$3,316.92</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$3,530.77</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$6,947.69</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$10,209.63</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$11,866.15</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$13,173.85</td><td>$0.00</td></tr></tbody> 
     </table> 
    </div> 

Answer 1

テーブルですあなたが望むものを達成するためのCSS。あなたは単にあなたの行がdisplay:blockあることを確認し、その後、次のJSを実行します。

var rows = document.querySelectorAll('tr'); 

for (var i = 0; i <= rows.length-1; i += 10) { 

    rows[i].style.marginBottom = '50px'; 

}; 

あなたのニーズに合うようにセレクタを少し変更する必要がありますが、それは基本的にはこれだけです。

[EDIT]

あなたthにインラインスタイルを外し、CSSでのようなものを実行します。

tr { 
    display: block;} 

th, 
td { 
    display:inline-block; 
    vertical-align:middle;} 

th:nth-child(1), 
td:nth-child(1) { 
    width: 50%;} 

th:nth-child(2), 
td:nth-child(2) { 
    width: 20%;} 

th:nth-child(3), 
td:nth-child(3) { 
    width: 20%;}