Question

我有一个带有可滚动tbody的表。问题是滚动工作我设置tbody的显示阻止，这反过来扰乱表格布局

<div align="center">
        <table class="sampleTable">
          <thead>
            <tr>
                <th class="centerAlign" colspan="3">
                    <b>HEADER</b>
                </th>
            </tr>
            <tr>
                <th class="centerAlign">COLUMN 1</th>
                <th class="centerAlign">COLUMN 2</th>
                <th class="centerAlign">COLUMN 3</th>
            </tr>
           </thead>
            <tbody class="scroll">
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
                <tr>
                    <td class="centerAlign">
                        <a href="google.com">DATA</a>
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                    <td class="centerAlign">
                        DATA
                    </td>
                </tr>
              </tbody>
          </table>
         </div>

这是css：

table {
  border-collapse: collapse;
  clear: both;
}

table.sampleTable {
  border: 0;
  width: 60%;
  height: 90%;
}

td {
  font-weight: normal;
  font-family: arial;
  font-size: 13px;
  color: #222222;
  line-height: 18px;
  border-top: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

td.centerAlign {
  text-align: center;
}

th.centerAlign {
  text-align: center;
}

/* Scrollable tbody. */

tbody.scroll {
    overflow: scroll;
    height: 100px;
    width: 100%;
}

表格如下所示，不会滚动： Without block display

现在，如果我将'display：block添加到tbody.scroll类和thead，它会开始滚动（正如我想要的那样）但是布局搞砸了。

tbody.scroll {
        overflow: scroll;
        height: 100px;
        width: 100%;
        display: block;
    }

thead {
    display:block;
}

现在的样子。 enter image description here

是否可以让tbody滚动，而不会打扰桌子的外观和感觉？

Answer 1

我找到了解决方案。在视口中添加宽度可以修复它。

td.centerAlign {
  text-align: center;
  width: 100vw;
}

th.centerAlign {
  width: 100vw;
  text-align: center;
}

Answer 2

这是一个示例，这可以帮助您：http://jsfiddle.net/a9Lave1x/4/

HTML：

<div class="fixed-table-container">
<div class="header-background">
</div>
<div class="fixed-table-container-inner">
    <table cellspacing="0">
      <thead>
        <tr>
          <th class="first">
            <div class="th-inner">First</div>
          </th>
          <th class="second">
            <div class="th-inner">Second</div>
          </th>
          <th class="third">
            <div class="th-inner">Third</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>First</td>
          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
        </tr>
        <tr>
          <td>Last</td>
          <td>Last</td>
          <td>Last</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS：

.header-background {
        background-color: #D5ECFF;
        height: 30px;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
    }
    .fixed-table-container {
        width: 50%;
        height: 200px;
        border: 1px solid #000;
        margin: 10px auto;
        background-color: #FFF;
        position: relative;
        padding-top: 30px;
    }
    .fixed-table-container-inner {
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
    }
    thead{
        color:black;
    }
    .first .th-inner {
        border-left: medium none;
        padding-left: 6px;
    }
    .th-inner {
        position: absolute;
        top: 0px;
        line-height: 30px;
        text-align: left;
        border-left: 1px solid #000;
        padding-left: 5px;
        margin-left: -5px;
    }

在使用tbody的块显示时保留表格布局

2 个答案: