這個問題讓我覺得它是重復的，但是在經歷了多個相關線程之后我意識到......我已經經歷了關于我的要求的大多數相關線程（固定列），并且在遵循答案之后我面臨著一些文本重疊的問題如下......我正在嘗試實現一些目標，例如使前三列的表格標題?html?固定，并且所有其他列都可以滾動。https://i.stack.imgur.com/pB8E0.png 所以，最后 - 我想實現這樣的目標：https://i.stack.imgur.com/f70z1.png 我可以嘗試哪些事情？
1 回答
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
您可以調整標準HTML Table以滿足您的需求。
現在，下面是這種包裝如何工作的演示......
<!DOCTYPE html>
<html>
<head>
? ? <title></title>
? ? <style>
? ? ? ? .Light{
? ? ? ? ? ? background-color: lightgrey;
? ? ? ? }
? ? ? ? .Dark{
? ? ? ? ? ? background-color: darkgrey;
? ? ? ? }
? ? ? ? table{
? ? ? ? ? ? border: none;
? ? ? ? ? ? padding:none;
? ? ? ? ? ? margin:none;
? ? ? ? ? ? min-width: 1200px;
? ? ? ? }
? ? ? ? table tr th{
? ? ? ? ? ? padding-left: 15pt;
? ? ? ? ? ? height:24pt;
? ? ? ? }
? ? ? ? table tr td, table tr th{
? ? ? ? ? ? padding: 15pt;
? ? ? ? ? ? min-width: 150px;
? ? ? ? }
? ? ? ??
? ? ? ? .tableWrap{
? ? ? ? ? ? max-width: 800px;
? ? ? ? ? ? overflow-x: scroll;
? ? ? ? }
? ? ? ? .ParentPos{
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? .ChildPos{
? ? ? ? ? ? position: relative;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? right:0;
? ? ? ? ? ? top:-0.575rem;
? ? ? ? ? ? bottom:0px;
? ? ? ? ? ? height: 100%
? ? ? ? }
? ? ? ? /*First 3 cells in the header row:*/
? ? ? ? table tr th:nth-child(-n+3){
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? padding-top: 27pt;
? ? ? ? ? ? padding-bottom: 4pt;
? ? ? ? }
? ? ? ? /*First 3 cells in the content row:*/
? ? ? ? table tr td:nth-child(-n+3){
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? padding-top: 27pt;
? ? ? ? ? ? padding-bottom: 16.75pt;
? ? ? ? }
? ? ? ? table tr th:nth-child(2), table tr td:nth-child(2){
? ? ? ? ? ? left:145pt;
? ? ? ? }
? ? ? ? table tr th:nth-child(3), table tr td:nth-child(3){
? ? ? ? ? ? left:287pt;
? ? ? ? }
? ? ? ? table tr th:nth-child(4){
? ? ? ? ? ? padding-left: 440pt;
? ? ? ? }
? ? ? ? table tr td:nth-child(4){
? ? ? ? ? ? padding-left: 500pt;
? ? ? ? }
? ? ? ? /*Making the spacing even out:*/
? ? ? ? table tr th:nth-child(n+5){
? ? ? ? ? ? padding-left: 0pt;
? ? ? ? }
? ? ? ? /*Making the spacing even out:*/
? ? ? ? table tr td:nth-child(n+5){
? ? ? ? ? ? padding-left: 60pt;
? ? ? ? }
? ? ? ? /*This sets alternating colours on each odd numbered column:*/
? ? ? ? table tr:nth-child(odd) td, table tr:nth-child(odd) th {
? ? ? ? ? ? background-color: lightgrey;??
? ? ? ? }
? ? ? ? /*This sets alternating colours on each even numbered column:*/
? ? ? ? table tr:nth-child(even) td, table tr:nth-child(even) th {
? ? ? ? ? ? background-color: darkgrey;??
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="tableWrap">
? ? ? ?<table cellspacing="0">
? ? ? ? <tr>
? ? ? ? ? ? <th>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Heading 1
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? ? <th>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Heading 2
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </th>
? ? ? ? ? ? <th>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Heading 3
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </th>
? ? ? ? ? ? <th>Heading 4</th>
? ? ? ? ? ? <th>Heading 5</th>
? ? ? ? ? ? <th>Heading 6</th>
? ? ? ? ? ? <th>Heading 7</th>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Content 1
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Content 2
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Content 3
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? ? <td>Content 4</td>
? ? ? ? ? ? <td>Content 5</td>
? ? ? ? ? ? <td>Content 6</td>
? ? ? ? ? ? <td>Content 7</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Content 1
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Content 2
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <div class="ParentPos">
? ? ? ? ? ? ? ? ? ? <div class="ChildPos">
? ? ? ? ? ? ? ? ? ? ? ? Content 3
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? ? <td>Content 4</td>
? ? ? ? ? ? <td>Content 5</td>
? ? ? ? ? ? <td>Content 6</td>
? ? ? ? ? ? <td>Content 7</td>
? ? ? ? </tr>
? ? ? ?</table>
? ? </div>
</body>
</html>
- 1 回答
- 0 關注
- 149 瀏覽
添加回答
舉報
0/150
提交
取消