CSS：固定第一列表？ （仅限CSS！）

时间：2016-10-07 03:11:29

标签： html css

我一直试图找出一种方法来获取标准表并创建一个固定列表，其中第一列是固定的，而其余的则滚动。我认为有两种方式是有意义的，所以我将从那开始。

对我来说有意义的第一种方法是简单地通过创建一个单独的表作为我们想要的列来破坏表格代码格式，如下所示：

<div class="table-container">
    <div class="table-column">
         <table>
              <thead><tr><th>&nbsp;</th></tr></thead>
              <tbody>
                   <tr><td>Side Header 1</td></tr>
                   <tr><td>Side Header 2</td></tr>
                   <tr><td>Side Header 3</td></tr>
                   <tr><td>Side Header 4</td></tr>
                   <tr><td>Side Header 5</td></tr>
                   <tr><td>Side Header 6</td></tr>
              </tbody>
         </table>
    </div>
    <div class="table-column" style="overflow-x: auto;">
         <table>
              <thead>
                   <tr><th>Top Header 1</th><th>Top Header 2</th></tr>
              </thead>
              <tbody>
                   <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>
                   <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr>
                   <tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td></tr>
                   <tr><td>Row 4, Cell 1</td><td>Row 4, Cell 2</td></tr>
                   <tr><td>Row 5, Cell 1</td><td>Row 5, Cell 2</td></tr>
                   <tr><td>Row 6, Cell 1</td><td>Row 6, Cell 2</td></tr>
              </tbody>
         </table>
    </div>
</div>

我们让第一列只有<th>空格，以便整个表格的样式仍然适合。

我真正想要做的是让这更像是一个动态的过程......显然在这种情况下（特别是使用“动态”这个词）我可以使用一些JS，但必须有一种在CSS中执行此操作的方法......但似乎没有任何可靠的在线...所以我认为我可以试一试。

我能够来的最近的就是使用data-attribute:;和td::before，就像这样：

<div class="box-table">
  <table class="text-center hover stripes">
    <thead>
      <tr>
        <th data-label="Cat 1">Cat 1</th>
        <th>Cat 2</th>
        <th>Cat 3</th>
        <th>Cat 4</th>
        <th>Cat 5</th>
        <th>Cat 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Col 1">Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
        <td>Col 5</td>
        <td>Col 6</td>
      </tr>
      <tr>
        <td data-label="Col 1">Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
        <td>Col 5</td>
        <td>Col 6</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
tr > th:first-child,
tr > td:first-child {
  padding: 0;
}
tr > th:first-child::before,
tr > td:first-child::before {
  content: attr(data-label);
  display: inline-block;
  position: fixed;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.2);
  letter-spacing: 1px;
  padding: 0 0.75rem;
}
<style>

这里是我迄今为止所取得的成果：https://jsfiddle.net/wn5nonu3/

我遇到了2个问题：

  1. 首先是因为我已经将项目设置为固定，如果表格的溢出允许垂直滚动，那么固定显然将保留在固定的位置并且显示与行不一致。
  2. 第二个问题是，我似乎无法设置td::before的样式（无论我将display:;值更改为什么，它似乎都会显示＆＃39;内联＆＃39;行为？）。

    3. 第二个问题的潜在解决方案是删除填充导致行更大，将第一列设置为固定宽度并将该宽度添加到td::before。我仍然无法解决第一个问题。

    我想我会分享，以防万一有任何关于这可能如何运作的想法，或者我所采取的路线是否真的可行？

    jsFiddle：https://jsfiddle.net/wn5nonu3/（与上面发布的相同，只是为了方便查找）

    为了记录：我知道有很多很棒的JS选项，我只想限制我在页面上抛出的脚本数量，这看起来似乎很有用。

1 个答案:

答案 0 :(得分：1)

你可以通过使用两个具有相同风格的表来实现它，但它有点难以维护。您必须确保两个表位于同一行，并且它们之间没有空格。当您将表格与实际内容包装在滚动的div中时。老实说，除非你真的不想使用JS，否则我不会去那里，但这是你的召唤。

＆＃13;
＆＃13; 
.table-wrapper {
  width: 100%;
  white-space: nowrap;
}

.table-firstcolon {
  display: inline-block;
  vertical-align: top;
}
.table-firstcolon td,
.table-firstcolon th {
  width: 60px;
}

.table-content-wrapper {
  display: inline-block;
  overflow-x: scroll;
  vertical-align: top;
  max-width: calc(100% - 60px);
}

.table-content-wrapper>table {
  display: inline-block;
  vertical-align: top;
}


/* Page Setup */

*,
*::after,
*::before {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  height: 100%;
  line-height: 1.5;
  width: 50%;
}

body {
  min-height: 100%;
  padding: 5px 10px;
  /* this style is only for the fiddle, would be '0' */
  width: 100%;
}


/* General Table Styling */

table {
  background: #fdfdfd;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: bold;
}

thead,
tbody,
tfoot {
  border: 1px solid #f1f1f1;
}

th, td {
  padding: 6px;
  text-align: left;
}

thead tr:first-child {
  font-weight: bold;
  border-bottom: 2px solid #eee;
}

tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.025);
}

tr:hover td {
  background-color: rgba(0, 0, 0, 0.04);
  color: #000;
}
＆＃13; 
<div class="table-wrapper">
  <table class="table-firstcolon text-center hover stripes">
    <thead>
      <tr>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Row 1</th>
      </tr>
      <tr>
        <th>Row 2</th>
      </tr>
      <tr>
        <th>Row 3</th>
      </tr>
      <tr>
        <th>Row 4</th>
      </tr>
      <tr>
        <th>Row 5</th>
      </tr>
      <tr>
        <th>Row 6</th>
      </tr>
    </tbody>
  </table><!--
--><div class="table-content-wrapper">
    <table>
      <thead>
        <tr>
          <th>Column A</th>
          <th>Column B</th>
          <th>Column C</th>
          <th>Column D</th>
          <th>Column E</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
          <td>E1</td>
        </tr>
        <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td>D2</td>
          <td>E2</td>
        </tr>
        <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
          <td>D3</td>
          <td>E3</td>
        </tr>
        <tr>
          <td>A4</td>
          <td>B4</td>
          <td>C4</td>
          <td>D4</td>
          <td>E4</td>
        </tr>
        <tr>
          <td>A5</td>
          <td>B5</td>
          <td>C5</td>
          <td>D5</td>
          <td>E5</td>
        </tr>
        <tr>
          <td>A6</td>
          <td>B6</td>
          <td>C6</td>
          <td>D6</td>
          <td>E6</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题