如何使HTML表格能够水平和真实地滚动

如何使HTML表格能够水平和真实地滚动,html,css,Html,Css,我创建了一个包含20列和10行的表。现在我正试图使它在高度和宽度上都可以滚动。但是出现了很多问题,比如表的thead比tbody宽,并且thead的列不匹配。这是代码。 HTML:- table.scroll{ 宽度:100%; } 表1.2.1.1.2.1.1.1阀体, 表1.4滚动条{ 显示:块; } 表1.2.2.2.1.1.1.2.2.2.2.2.2.2.1.1.2.1.1.1.2.2.2.2.2.2.1.1{ 高度:100px; 溢出y:自动; 溢出x:隐藏; } 学生证 序号 学

我创建了一个包含20列和10行的表。现在我正试图使它在高度和宽度上都可以滚动。但是出现了很多问题,比如表的thead比tbody宽,并且thead的列不匹配。这是代码。 HTML:-

table.scroll{
宽度:100%;
}
表1.2.1.1.2.1.1.1阀体,
表1.4滚动条{
显示:块;
}
表1.2.2.2.1.1.1.2.2.2.2.2.2.2.1.1.2.1.1.1.2.2.2.2.2.2.1.1{
高度:100px;
溢出y:自动;
溢出x:隐藏;
}

学生证
序号
学名
L
U
15-14-065
1.
异教徒伊斯兰教
L
U

尽管@Santi是正确的,但它不仅仅是缺少结束标记和不匹配其他标记,您的css格式不好。请查看我下面的示例,它可以让您的代码滚动:

CSS:


表格.滚动{
最小宽度:100%;
高度:200px;
溢出:自动;
边框:实心1px#9CB3BD;
边界间距:0px;
边界塌陷:塌陷;
}
表,th,td{
边框:实心1px灰色;
填充:20px;
}
HTML:


你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是一个领班
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据
你好,我是表数据

我想让您的问题包括一个可运行的代码段,但是它充满了错误。您的
缺少结束标记。此外,您所有的
都有
标记,而不是
标记。请解决这些问题。如果您正在关闭带有
标记,则您的问题必须具有正确的答案。如果你给我们提供的例子充满了错误,那么它是不完整的,也不可验证的,也不可复制的。请搜索,如果你不认为某个问题是重复的,请给出你的答案,说明它如何不符合你的需要。
<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>
<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>