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

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%;
}

表格如下所示，不会滚动： 现在如果我将'display: block'添加到'tbody.scroll'类和'thead'，它开始滚动（正如我所希望的），但布局却乱了。

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

thead {
    display:block;
}

现在的样子是这样的。

是否可能使tbody滚动，而不会影响表格的外观和感觉？

- Shan

Answer 1

我找到了解决方案。在视口中添加宽度可以解决问题。

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

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

- Shan

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;
    }

- BobyCode

Answer 3

我的解决方法是将整个表格用一个 div 容器包裹起来，

设置容器的最大高度（或任何高度），

将 overflow(-x/y) 设置为 auto，它就神奇地工作了。

- Vincent Lam