Code
2023-12-15 10:00:01

我如何创建一个固定/冻结左列和可滚动的主体HTML表?

我需要一个简单的解决方案。我知道这和其他一些问题类似，比如:

固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动，可能使用JavaScript和CSS?

但我只需要一个单独的左列被冻结，我更喜欢一个简单的和无脚本的解决方案。

当前回答

有点晚了，但我确实在为自己尝试解决方案时遇到了这个线程。假设您现在使用的是现代浏览器，我提出了一个使用CSS calc()来帮助保证满足宽度的解决方案。

.table-fixed-left table, .table-fixed-right table { border-collapse: collapse; } .table-fixed-right td, .table-fixed-right th, .table-fixed-left td, .table-fixed-left th { border: 1px solid #ddd; padding: 5px 5px; } .table-fixed-left { width: 120px; float: left; position: fixed; overflow-x: scroll; white-space: nowrap; text-align: left; border: 1px solid #ddd; z-index: 2; } .table-fixed-right { width: calc(100% - 145px); right: 15px; position: fixed; overflow-x: scroll; border: 1px solid #ddd; white-space: nowrap; } .table-fixed-right td, .table-fixed-right th { padding: 5px 10px; } <div class="table-fixed-left"> <table> <tr> <th>Normal Header</th> </tr> <tr> <th>Header with extra line <br/>&nbsp;</th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal with extra line <br/>&nbsp;</th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal Header</th> </tr> </table> </div> <div class="table-fixed-right"> <table> <tr> <th>Header</th> <th>Another header</th> <th>Header</th> <th>Header really really really really long</th> </tr> <tr> <td>Info Long</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info Long</td> </tr> <tr> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> </tr> <tr> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> </table> </div>

希望这能帮助到一些人!

2015-05-10 20:37:45

其他回答

如果你在webdeveloper的地狱里，需要让它在IE6上工作，下面是我使用的示例代码:

<html>
<head>
<style type="text/css">
.fixme {
    position: relative;
    left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    background-color: #FFFFFF;
}
</style>
</head>
<body>
<table width="1500px" border="2">
    <tr>
        <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet</td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
    </tr>
    <tr>
        <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
    </tr>
    <tr>
        <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
    </tr>
    <tr>
        <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
    </tr>
</table>
</body>
</html>

这可能只适用于IE6，所以在CSS中使用条件注释。

2011-12-08 14:59:33

有点晚了，但我确实在为自己尝试解决方案时遇到了这个线程。假设您现在使用的是现代浏览器，我提出了一个使用CSS calc()来帮助保证满足宽度的解决方案。

.table-fixed-left table, .table-fixed-right table { border-collapse: collapse; } .table-fixed-right td, .table-fixed-right th, .table-fixed-left td, .table-fixed-left th { border: 1px solid #ddd; padding: 5px 5px; } .table-fixed-left { width: 120px; float: left; position: fixed; overflow-x: scroll; white-space: nowrap; text-align: left; border: 1px solid #ddd; z-index: 2; } .table-fixed-right { width: calc(100% - 145px); right: 15px; position: fixed; overflow-x: scroll; border: 1px solid #ddd; white-space: nowrap; } .table-fixed-right td, .table-fixed-right th { padding: 5px 10px; } <div class="table-fixed-left"> <table> <tr> <th>Normal Header</th> </tr> <tr> <th>Header with extra line <br/>&nbsp;</th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal with extra line <br/>&nbsp;</th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal Header</th> </tr> </table> </div> <div class="table-fixed-right"> <table> <tr> <th>Header</th> <th>Another header</th> <th>Header</th> <th>Header really really really really long</th> </tr> <tr> <td>Info Long</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info Long</td> </tr> <tr> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> </tr> <tr> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> </table> </div>

希望这能帮助到一些人!

2015-05-10 20:37:45 
.div1 {
    width: 600px;
    height: 400px;
    overflow: scroll;
    border: 1px solid #777777;
}

.div1 table {
    border-spacing: 0;
}

.div1 th {
    border-left: none;
    border-right: 1px solid #bbbbbb;
    padding: 5px;
    width: 80px;
    min-width: 80px;
    position: sticky;
    top: 0;
    background: #727272;
    color: #e0e0e0;
    font-weight: normal;
}

.div1 td {
    border-left: none;
    border-right: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    padding: 5px;
    width: 80px;
    min-width: 80px;
}

.div1 th:nth-child(1),
.div1 td:nth-child(1) {
    position: sticky;
    left: 0;
    width: 150px;
    min-width: 150px;
}

.div1 th:nth-child(2),
.div1 td:nth-child(2) {
    position: sticky;
    /* 1st cell left/right padding + 1st cell width + 1st cell left/right border width */
    /* 0 + 5 + 150 + 5 + 1 */
    left: 161px;
    width: 50px;
    min-width: 50px;
}

.div1 td:nth-child(1),
.div1 td:nth-child(2) {
    background: #ffebb5;
}

.div1 th:nth-child(1),
.div1 th:nth-child(2) {
    z-index: 2;
}

HTML,

<div class="div1">
    <table>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
            <th>Column 6</th>
        </tr>
        <tr>
            <td>Row Data 1</td>
            <td>Row Data 2</td>
            <td>Row Data 3</td>
            <td>Row Data 4</td>
            <td>Row Data 5</td>
            <td>Row Data 6</td>
        </tr>
        <tr>
            <td>Row Data 1</td>
            <td>Row Data 2</td>
            <td>Row Data 3</td>
            <td>Row Data 4</td>
            <td>Row Data 5</td>
            <td>Row Data 6</td>
        </tr>
    </table>
</div>

Youtube视频演练:https://www.youtube.com/watch?v=_dpSEjaKqSE

例1:固定宽度和高度

https://adriancs.com/demo/freeze_table_column_row.html

示例2:响应宽度和高度(通过使用viewport进行调整)

https://adriancs.com/html-css-js/298/html-table-freeze-row-and-column-with-css/

完整的教程解释:

https://adriancs.com/demo/freeze_table_column_row_responsive_viewport.html

2021-12-15 15:52:45

对于2017年之后发布的大多数浏览器:

你可以使用位置:粘性。= css-sticky看到https://caniuse.com/壮举。

不需要固定宽度的列。

运行下面的代码片段，看看它的工作原理。

.tscroll { width: 400px; overflow-x: scroll; margin-bottom: 10px; border: solid black 1px; } .tscroll table td:first-child { position: sticky; left: 0; background-color: #ddd; } .tscroll td, .tscroll th { border-bottom: dashed #888 1px; } <html> <div class="tscroll"> <table> <thead> <tr> <th></th> <th colspan="5">Heading 1</th> <th colspan="8">Heading 2</th> <th colspan="4">Heading 3</th> </tr> </thead> <tbody> <tr> <td>9:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>10:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>11:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>12:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>13:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>14:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>15:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>16:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>17:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> </tbody> </table> </div>

2019-08-24 16:25:54

我改进了断路器的例子，原来的例子代码将动摇固定列，因为表有填充，我使用边界崩溃:崩溃禁用它

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--mobile friendly-->
  <meta name="viewport" content="width=device-width, user-scalable=yes">
  <style>
    .view {
      margin: auto;
      width: 600px;
    }

    .wrapper {
      position: relative;
      overflow: auto;
      border: 1px solid black;
      white-space: nowrap;
    }

    .sticky-col {
      position: -webkit-sticky;
      position: sticky;
      background-color: white;
    }

    .first-col {
      padding: 0;
      margin: 0;
      left: 0;
    }

    .second-col {
      left: 200px;
    }

    .col {
      width: 200px;
      min-width: 200px;
      max-width: 200px;
    }
  </style>
</head>
<body>
<div class="view">
  <div class="wrapper">
    <table class="table" style="border-collapse: collapse;">
      <colgroup>
        <col class="col"/>
        <col class="col"/>
        <col class="col"/>
        <col class="col"/>
      </colgroup>
      <thead>
      <tr>
        <th class="sticky-col first-col">Number</th>
        <th class="sticky-col second-col">First Name</th>
        <th>Last Name</th>
        <th>Employer</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td class="sticky-col first-col">1</td>
        <td class="sticky-col second-col">Mark</td>
        <td>Ham</td>
        <td>Micro</td>
      </tr>
      <tr>
        <td class="sticky-col first-col">2</td>
        <td class="sticky-col second-col">Jacob</td>
        <td>Smith</td>
        <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
      </tr>
      <tr>
        <td class="sticky-col first-col">3</td>
        <td class="sticky-col second-col">Larry</td>
        <td>Wen</td>
        <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
</body>
</html>
2023-01-17 03:52:08

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1