Question

我必须修改一些遗留代码，这些代码使用不推荐的方式来布局<table>页面。预期的布局应该是：

-------------------------|^|
row1,col1      |---------| |   X: a long 2nd inner table
---------------|---------| |   S: a vertical scroll bar
row2,col1      |-----X---|S|
---------------|---------| |
row3,col1      |---------| |
---------------|---------|_|
row4,col1      | row4,col2 |
---------------------------|
row5,col1      | row5,col2 |
---------------------------|

如果行必须是固定高度且[X]内容（跨越3行），则应该有一个垂直滚动条。

这是一个示例代码。无论如何它不会将行保持在固定的高度，既不显示滚动条，也只是放大外部表以适应长内部表：

 <html>
 <body>

 <table  border="1" style="width: 100%; height: 400px;">
 <tbody>
 <tr style="width: 100%; height: 55px;">
    <td  style="vertical-align: top; width: 75%; height: 40px;">row 1</td>
    <td  style="width: 20%; height: 55px;" rowspan="3">

    <div style="height 55px; overflow: scroll;">

                  <table   border="1" cellpadding="0" cellspacing="0" style="width: 90%; height: 90px;">
                  <tbody>
                  <tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td></tr>
                  <tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td> </tr>
                  <!--           ...                -->
                  <!-- Many other similar rows here -->
                  <!--           ...                -->
                  <tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td> </tr>
                 </tbody>
          </table>
 </div>
 </td></tr>

 <tr style="vertical-align: top; height: 30px"> <td  style="height: 20px">row 2</td> </tr>
 <tr style="vertical-align: top; height: 30px"> <td  style="height: 20px">row 3</td> </tr>
 <tr style="vertical-align: top; height: 30px"> <td  style="height: 20px">row 4</td> </tr>
 <tr style="vertical-align: top; height: 30px"> <td  style="height: 20px">row 5</td> </tr>



 </tbody>
 </table>
 <div>2016 - bottom line</div>
 </body></html>

任何建议都非常受欢迎。

HTML TABLE固定ROWS高度，带有rowspan和垂直滚动条

0 个答案: