Question

我想要溢出我的桌子。

-----------------------
|  name  |  height  |
-----------------------
| john   |  5,8     ^
| josh   |  6,4     |
| joshua |  5,4     |
| jon    |  5,5     V
-----------------------

我用overflow-y：scroll; 但我想要的是，只有桌子正在滚动。我想要的就像我上面的例子。

<table class="table table-hover table-responsive">
<thead>
  <tr>
    ...
  </tr>
</thead>
<tbody>
  <tr>
   ...
  </tr>
  <tr>
   ...
  </tr>
</tbody>

是否可以仅溢出桌子身体部位？我正在使用bootstrap。

Answer 1

最简单的方法：

在一个表中添加两个表tabel1和table2。现在包括table1中的表头和table2中的表主体。对表2使用@RequestMapping (value="abcxyz.htm", method=RequestMethod.GET) ModelAndView fieldMapping(){ ModelAndView modelAndView=new ModelAndView("FieldMappingMainScreenNext"); return modelAndView; }或style="overflow:auto;"。

Answer 2

我发现这个解决方案有效

<table class="table table-striped">
        <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
        </tr>
         <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
        </tr>
          <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
        </tr>
        <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
        </tr>
         <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
        </tr>
         <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
        </tr>
        </tbody>

    </table>

和这个css

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}


tbody {
    height: 200px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 20%;
    float: left;
}

您可以在此处查看演示Bootply

在bootstrap表中溢出

2 个答案: