Question

我正在尝试使用HTML中的Excel表格，但它不起作用。我的想法是修复我的表的一些列，并在其他列中放置一个滚动。我正在寻求帮助，看到一些评论说要把两张桌子放在一张大桌子里面。我将展示我的例子：

private async void button2_Click(object sender, EventArgs e) {
    var enbode = new Nethereum.Geth.Web3Geth("http://127.0.0.1:8545");
    var peers = await enbode.Admin.Peers.SendRequestAsync();
    richTextBox1.Text = peers.ToString();
    var peer = JsonConvert.DeserializeObject<Example>(richTextBox1.Text);
    dataGridView2.DataSource = new [] { peer };
}

重点是：我希望人们的名字始终可见，并且日期列的侧面滚动（此示例显示3天，但我可能有超过100天）。基本上就是这样。如果你们知道任何更好的HTML结构，或者如果有一些CSS属性可能会这样做，我会很高兴知道！

（我试图使用一些<html> <head> <meta charset="utf-8"/> <title>How can I do a Scroll in a specific part of my screen?</title> </head> <body> <div id="maindiv"> <table id="maintable"> <tbody> <tr> <th id="colfixed"> <table id="fixedtable"> <tbody> <tr> <th> Name </th> </tr> <tr> <td> Person 1 </td> </tr> <tr> <td> Person 2 </td> </tr> <tr> <td> Person 3 </td> </tr> </tbody> </table> </th> <th id="colscroll"> <table id="scrolltable"> <tbody> <tr> <th> Day 1 </th> <th> Day 2 </th> <th> Day 3 </th> </tr> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> </tbody> </table> </th> </tr> </tbody> </table> </div> </body> <html>和overflow: scroll，但它没有像我预期的那样工作）。

Answer 1

您可以查看position:sticky 及其polyfills（以支持过时的浏览器）：https://css-tricks.com/position-sticky-2/

CSS demo（无需覆盖表格，单个表格可以执行此操作）：

div {
  max-width: 100%;
  overflow: auto;
  position: relative
}

tr> :first-child {
  background: gray;
  position: sticky;
  left: 0;
}

<div>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
        <th>day</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>person</th>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
      </tr>
      <tr>
        <th>person</th>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
      </tr>
      <tr>
        <th>person</th>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
      </tr>
      <tr>
        <th>person</th>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
      </tr>
      <tr>
        <th>person</th>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
      </tr>
    </tbody>
  </table>
</div>

如何在桌子内滚动？

1 个答案: