Question

请帮忙，我有一个html表，没有改变布局和响应行为 - 我想让表头固定 - 请建议

这里要实现表头和表的响应性。这是行不通的

滚动时

- 3个标题和表头应该得到修复。

.rg-container {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  padding: 1em 0.5em;
  color: #222;
}

.rg-header {
  margin-bottom: 1em;
  text-align: left;
}

.rg-header>* {
  display: block;
}

<h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header
  <div>
    <div class='rg-container'>
      <div class='rg-content'>
        <table class='rg-table'>
          <thead>
            <tr>
              <th class='text '>id</th>
              <th class='text '>somcol</th>
              <th class='text '>biggger id</th>
              <th class='text '>another id</th>
              <th class='text '>med col</th>
              <th class='text '>med col</th>
            </tr>
          </thead>
          <tbody>

            <tr class=''>
              <td class='text ' data-title='id'>id</td>
              <td class='text ' data-title='somcol'>somcol</td>
              <td class='text ' data-title='biggger id'>biggger id</td>
              <td class='text ' data-title='another id'>another id</td>
              <td class='text ' data-title='med col'>med col</td>
              <td class='text ' data-title='med col'>med col</td>
              <td class='text ' data-title='sheet'>sheet</td>
              <td class='text ' data-title='sheet'>sheet</td>
              <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
              <td class='text ' data-title='small'>small</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

Answer 1

试试这个：

h3 table.rg-table-head {
  position: fixed;
}
h3 table.rg-table-body {
  padding-top: 1em;
}

CSS：

const filter = {
    $schema: "http://powerbi.com/product/schema#basic",
    target: {
        table: "tableName",
        column: "columnName"
    },
    operator: "In",
    values: ["value1", "value2"]
};

Here it is on CodePen

Answer 2

在这种情况下，您需要设置标题高度，并将所有内容放在标题下。

CSS：

.headers {
  position: fixed;
  height: 100px; /* However long you want the header background */
  top: 0;
  width: 100%;
}


/* Then, for the tables, you would set the **margin-top** to whatever the 
headers height is. */ 

.content {
  margin-top: 100px;
}

接下来，只需设置div id：

HTML：

<div id="headers">
/* Your headers */
</div>
<div id="content">
/* Your HTML content */
</div>

如何修复html表头+要修复的表上方的内容

2 个答案: