如何使HTML表格水平和veritcally滚动

时间：2017-07-18 14:09:59

标签： html css

我创建了一个包含20列和10行的表。现在我想让它在高度和宽度上都能滚动。但是有很多问题发生，比如桌子的thead比tbody宽，并且thead的列不匹配。这是代码。 HTML： - 

table.scroll {
  width:100%;
}

table.scroll tbody,
table.scroll thead {
  display: block;
}

table.scroll tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}
<div class="maincontainer" style="height:40">

  <table class="scroll" style="width: 100%; height: 486px;" border="1px" bordercolor="#9CB3BD" cellspacing="0px">

    <thead position:fixed>
          <tr style="height: 83px;">
          <th style="width: 249px; height: 83px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; STUDENT-ID</td>
          <th style="width: 34px; height: 83px;">&nbsp;S.NO</td>
          <th style="width: 198px; height: 83px;">&nbsp; &nbsp; &nbsp; &nbsp; STUDENT NAME</td>
          <th style="width: 11px; height: 83px;">&nbsp;L</td>
          <th style="width: 11px; height: 83px;">U&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 12px; height: 83px;">&nbsp;</td>
          <th style="width: 12px; height: 83px;">&nbsp;</td>
          <th style="width: 12px; height: 83px;">&nbsp;</td>
          <th style="width: 13px; height: 83px;">&nbsp;</td>
          <th style="width: 13px; height: 83px;">&nbsp;</td>
      </tr>
    </thead>
    <tbody>
      <tr style="height: 23px;">
        <td style="width: 249px; height: 23px;">15-14-065</td>
        <td style="width: 34px; height: 23px;">1</td>
        <td style="width: 198px; height: 23px;">Anisul Islam</td>
        <td style="width: 11px; height: 23px;">L</td>
        <td style="width: 11px; height: 23px;">U</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 12px; height: 23px;">&nbsp;</td>
        <td style="width: 12px; height: 23px;">&nbsp;</td>
        <td style="width: 12px; height: 23px;">&nbsp;</td>
        <td style="width: 13px; height: 23px;">&nbsp;</td>
        <td style="width: 13px; height: 23px;">&nbsp;</td>
      </tr>

1 个答案:

答案 0 :(得分：0)

虽然@Santi是正确的，但它不仅仅是缺少结束标记而且不匹配其他标记，你的css格式不正确。看看下面的示例，它会让您的代码滚动：

CSS：

<style>
    table.scroll {
        min-width:100%;
        height: 200px;
        overflow:auto;
        border: solid 1px #9CB3BD;
        border-spacing: 0px;
        border-collapse: collapse;
    }

    table, th, td {
        border: solid 1px gray;
        padding: 20px;
    }
</style>

HTML：

<table class="scroll">
    <thead>
        <tr>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>             
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
            </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>        
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
      </tr>
    </tbody>
</table>
相关问题
最新问题