HTML - 将滚动条添加到表格主体?

时间:2016-06-18 22:00:04

标签: html css

我有一张桌子,里面有一些内容。我想在body添加滚动条。我无法让它发挥作用;我打电话给上课并尝试添加一个滚动条,但它不会出现。所以我正在寻找解决方案。这是我的代码:



var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
var total = 0;

function sitaSeen(img, name, condition, price) {
  $('tbody').append("<tr><td><img src=" + img + "></td><td>" + name + "</td><td>" + condition + "</td><td>$" + price + "</td><td><span>X</span></td></tr>");
  total += price;
  $('#total').empty();
  $('#total').append("Total: $" + total);
}
$('.papa').on('click', 'tr span', function(){
		$(this).closest('tr').remove();
});
&#13;
<h2>System</h2>
<button onclick="sitaSeen('https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf3qr3czxb49KzgL-KmsjwPKvBmm5D19V5i_rEprP5gVO8v11lZj-gIYbDclRqMA7Zq1S7lOm-0Za6753KmHoxvnQh5y7ZyhWxiRwecKUx0iL1oy6z/60fx60f','M9 Bayonet | Doppler','Battle Scarred',70)">Click</button>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Logo</h2>
      <h2 id="total">Total: $0</h2>
    </div>
    <div class="modal-body">
      <table class="centered">
        <thead>
          <tr>
            <th data-field="pic"></th>
            <th data-field="id">Item</th>
            <th data-field="name">Conditon</th>
            <th data-field="price">Price</th>
            <th data-field="delete"></th>
          </tr>
        </thead>
          <tbody class="papa">
          </tbody>
      </table>
      <button>seen</button>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

因为您使用的是 position:fixed css属性,所以您的html元素将超出它正常的文档流程。这就是滚动条没有出现在文档中的原因。

一个解决方案是不使用 position:fixed 属性,我想你想让它以div#modal为中心。您可以使用许多其他选项来集中html元素。

Refer to this article