纯CSS

纯CSS

关注
发信
关注(28)粉丝(399)

html - 卡住表列在纯CSS中无法正常工作

我正在处理HTML表的冻结左列。我尝试了有关STO的各种建议方法，但都不适合我。然后，我使用2个相同样式的HTML表重新创建了它。虽然，我取得了一些成功，但还不是很完美。我无法解决它。我想坚持使用纯CSS来实现它。

这是我的代码：



	#tb_wrapper {
		border:1px solid red;
		position:relative;
		max-width:960px;
	}

	#fixed_tb_wrapper {
		position:absolute;
		left:0;
		top:0;
		z-index:99999;
	}

	#scrollable_tb_wrapper {
		border:1px solid #cccccc;
		z-index:-99999;
	}

	.tb_records1 {
		border-collapse:separate;
		border-spacing:0;
		text-align:center;
	}

	.tb_records1 th {
		background-color:#5F5F5F;
		color:#FFFFFF;
		font-weight:bold;
	}

	.tb_records1 th, .tb_records1 td {
		padding:10px;
		border:1px solid #000000;
		font-size:15px;
	}

	.tb_records1 tr:nth-child(even) {
		background-color:#F2F2F2;
	}

	.tb_records1 tr:hover {
		background-color:#F5F5F5;
	}

	.tb_responsive {
		overflow-x:auto;
		overflow-y:hidden;
	}

	.tb_records2 {
		border-collapse:separate;
		border-spacing:0;
		text-align:center;
		white-space:nowrap;
		width:100%;
	}

	.tb_records2 th {
		background-color:#5F5F5F;
		color:#FFFFFF;
		font-weight:bold;
	}

	.tb_records2 th, .tb_records2 td {
		padding:10px;
		border:1px solid #000000;
		font-size:15px;
	}

	.tb_records2 tr:nth-child(even) {
		background-color:#F2F2F2;
	}

	.tb_records2 tr:hover {
		background-color:#F5F5F5;
	}

	<div id="tb_wrapper">

        <div id="fixed_tb_wrapper" style="border:1px solid red;">
            <table class="tb_records1">
                <tr>
                    <th>Post ID</th>
                </tr>
                <tr>
                    <td>This is a long Post ID</td>
                </tr>
                <tr>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                </tr>
                <tr>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                </tr>
                <tr>
                    <td>10</td>
                </tr>
            </table>
        </div>

        <div id="scrollable_tb_wrapper" style="border:1px solid blue;">
            <div class="tb_responsive">
                <table class="tb_records2">
                    <tr>
                        <th>Post Name</th>
                        <th>Post URL</th>
                        <th>Post Title</th>
                        <th>Post Heading</th>
                        <th>Post Content</th>
                        <th>Post Date Published</th>
                        <th>Post Date Modified</th>
                        <th>Post Image</th>
                        <th>Post Views</th>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>My Post</td>
                        <td>my-post</td>
                        <td>My Post</td>
                        <td>My Post</td>
                        <td>Lorem ipsum dolor sit amet.</td>
                        <td>2017-07-21 13:58:16</td>
                        <td>2019-07-30 22:38:36</td>
                        <td>my-post.jpg</td>
                        <td>7</td>
                    </tr>
                </table>
            </div>
        </div>

    </div>





您会看到第一个具有单列“帖子ID”的表是固定的，右表在其下滚动。但是我有两个问题：


可滚动表的内容在第一个固定表（列）下可见。我使用了z-index，但没有效果。不知道为什么吗
是否需要给第一张固定桌子固定的宽度？然后等于左滚动条到右滚动表？如果是这样，那么似乎可行，但这将是唯一的最佳解决方案吗？

最佳答案

纯CSS解决方案


解决方案1



table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div>
<table>
        <tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table>
</div>





解决方案2



.container {
   /* Attach fixed-th-table to this container,
      in order to layout fixed-th-table
      in the same way as scolled-td-table" */
   position: relative;

   /* Truncate fixed-th-table */
   overflow: hidden;
}

.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
   /* Set background to non-transparent color
      because two tables are one above another.
    */
   background: white;
}
.fixed-th-table-wrapper {
   /* Make table out of flow */
   position: absolute;
}
.fixed-th-table-wrapper th {
    /* Place fixed-th-table th-cells above
       scrolled-td-table td-cells.
     */
    position: relative;
    z-index: 1;
}
.scrolled-td-table-wrapper td {
    /* Place scrolled-td-table td-cells
       above fixed-th-table.
     */
    position: relative;
}
.scrolled-td-table-wrapper {
   /* Make horizonal scrollbar if needed */
   overflow-x: auto;
}


/* Simulating border-collapse: collapse,
   because fixed-th-table borders
   are below ".scrolling-td-wrapper table" borders
*/

table {
    border-spacing: 0;
}
td, th {
   border-style: solid;
   border-color: black;
   border-width: 1px 1px 0 0;
}
th:first-child {
   border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
   border-bottom-width: 1px;
}

/* Unimportant styles */

.container {
    width: 250px;
}
td, th {
   padding: 5px;
}

<div class="container">

<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
    <tr>
         <th>aaaaaaa</th>
         <td>ccccccccccc asdsad asd as</td>
         <td>ccccccccccc asdsad asd as</td>
    </tr>
    <tr>
         <th>cccccccc</th>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
    </tr>
</table>
</div>

<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
     - same as fixed-th-table -->
<table>
    <tr>
         <th>aaaaaaa</th>
         <td>ccccccccccc asdsad asd as</td>
         <td>ccccccccccc asdsad asd as</td>
    </tr>
    <tr>
         <th>cccccccc</th>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
    </tr>
</table>
</div>

</div>

10-05 21:03
Powered by LMLPHP ©2024 纯CSS 0.025806