如何使用 HTML/CSS 创建第一列固定的表？

Posted

技术标签:

【中文标题】如何使用 HTML/CSS 创建第一列固定的表？【英文标题】：How to create a table with first column fixed using HTML/CSS? 【发布时间】：2017-06-19 04:08:13 【问题描述】：

我想创建一个可以水平滚动的表格。列数是动态的。我想在水平滚动表格时实现第一列需要固定/冻结。我尝试了以下CSS。第一列是固定的，但第二、第三列隐藏在固定列之下。

   .mydiv 
      overflow-y: scroll;
   .headcol 
    position:absolute;
    width: 100px;
    text-align:center;
    background-color: #4CAF50;
    color: white;
    font-family:arial;
    font-size:13px;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    border: 1px solid #c4c0c0;


.tablemy 
    border-collapse: collapse;
    border: 1px solid #c4c0c0;


.thmy 
    text-align:center;
    background-color: #4CAF50;
    color: white;
    font-family:arial;
    font-size:13px;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    border: 1px solid #c4c0c0;


.tdmy 
    white-space: nowrap;
    padding:8px; border-left:1px solid #ccc; border-top:1px solid #ccc;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    font-size:12px;
    font-family:arial;
    border: 1px solid #c4c0c0;
    color:#585858;

.trmy:nth-child(odd) 
    background-color:#F5F5F5;

tr:nth-child(even) 
    background-color:#ffffff;

我的桌子是

我正在用 javascript 创建我的表格。

  $(window).load(function()
var customers = new Array();
customers.push(["TN04 AH 0253", "55"]);
customers.push(["TN04 AF 8830", "67"]);
customers.push(["TN37 CM 1249", "33"]);
customers.push(["TN19 F 9175", "47"]);
customers.push(["TN37CM 1932", "0"]);

var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

var dateArray = getDates(firstDay, lastDay);

// Create a html Table element.
var table = document.createElement("TABLE");
table.setAttribute('class', 'tablemy');
table.border = "1";

// Get the count of columns.
var columnCount = customers[0].length;

var row = table.insertRow(-1);
for (var i = 0; i < dateArray.length; i++) 
    var headerCell = document.createElement("TH");
    if (i === 0) 
        headerCell.setAttribute('class', 'headcol');
     else 
        headerCell.setAttribute('class', 'thmy');
    
    //headerCell.setAttribute('class', 'thmy');
    headerCell.innerHTML = dateArray[i];
    row.appendChild(headerCell);


// Add the data rows.
for (var i = 0; i < customers.length; i++) 
    row = table.insertRow(-1);
    row.setAttribute('class', 'trmy');
    for (var j = 0; j < columnCount; j++) 
        var cell = row.insertCell(-1);
        if (j === 0) 
            cell.setAttribute('class', 'headcol');
         else 
            cell.setAttribute('class', 'tdmy');
        
        //cell.setAttribute('class', 'tdmy');
        cell.innerHTML = customers[i][j];
    


var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
)
function getDates(date1, date2) 
var day = 1000 * 60 * 60 * 24;
var diff = (date2.getTime() - date1.getTime())/day;
var dateArray = new Array();
dateArray.push("Unit/Count");
for(var i=0; i<=diff; i++)

    var xx = date1.getTime() + day * i;
    var yy = new Date(xx);

    var strDate = yy.getDate() + "/" + (yy.getMonth() + 1);
    dateArray.push(strDate);

return dateArray;

【问题讨论】：

你能提供一个工作的plunker吗？ 第一列有position:absolute;。对吗？ @Banzay 是的。 @GeethanjaliR 我正在使用 javascript 创建表。我现在把它贴在这里。 试过display:inline ? 【参考方案1】：

我认为您需要为第一列设置position: fixed，并让所有其他列可见，您需要为.tablemy 设置padding-left: 130px;（等于第一列的宽度）：

function getDates(date1, date2) 
var day = 1000 * 60 * 60 * 24;
var diff = (date2.getTime() - date1.getTime())/day;
var dateArray = new Array();
dateArray.push("Unit/Count");
for(var i=0; i<=diff; i++)

    var xx = date1.getTime() + day * i;
    var yy = new Date(xx);

    var strDate = yy.getDate() + "/" + (yy.getMonth() + 1);
    dateArray.push(strDate);

return dateArray;


var customers = new Array();
customers.push(["TN04 AH 0253", "55"]);
customers.push(["TN04 AF 8830", "67"]);
customers.push(["TN37 CM 1249", "33"]);
customers.push(["TN19 F 9175", "47"]);
customers.push(["TN37CM 1932", "0"]);

var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

var dateArray = getDates(firstDay, lastDay);

// Create a HTML Table element.
var table = document.createElement("TABLE");
table.setAttribute('class', 'tablemy');
table.border = "1";

// Get the count of columns.
var columnCount = customers[0].length;

var row = table.insertRow(-1);
for (var i = 0; i < dateArray.length; i++) 
    var headerCell = document.createElement("TH");
    if (i === 0) 
        headerCell.setAttribute('class', 'headcol');
     else 
        headerCell.setAttribute('class', 'thmy');
    
    //headerCell.setAttribute('class', 'thmy');
    headerCell.innerHTML = dateArray[i];
    row.appendChild(headerCell);


// Add the data rows.
for (var i = 0; i < customers.length; i++) 
    row = table.insertRow(-1);
    row.setAttribute('class', 'trmy');
    for (var j = 0; j < columnCount; j++) 
        var cell = row.insertCell(-1);
        if (j === 0) 
            cell.setAttribute('class', 'headcol');
         else 
            cell.setAttribute('class', 'tdmy');
        
        //cell.setAttribute('class', 'tdmy');
        cell.innerHTML = customers[i][j];
    


var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
html, body 
  margin: 0;
  padding: 0;

.mydiv 
      overflow-y: scroll;
   
  .headcol 
    position: fixed;
    left: 0;
    width: 100px;
    text-align:center;
    background-color: #4CAF50;
    color: white;
    font-family:arial;
    font-size:13px;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    border: 1px solid #c4c0c0;


.tablemy 
    border-collapse: collapse;
    border: 1px solid #c4c0c0;
    margin-left: 130px;


.thmy 
    text-align:center;
    background-color: #4CAF50;
    color: white;
    font-family:arial;
    font-size:13px;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    border: 1px solid #c4c0c0;


.tdmy 
    white-space: nowrap;
    padding:8px; border-left:1px solid #ccc; border-top:1px solid #ccc;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    font-size:12px;
    font-family:arial;
    border: 1px solid #c4c0c0;
    color:#585858;

.trmy:nth-child(odd) 
    background-color:#F5F5F5;

tr:nth-child(even) 
    background-color:#ffffff;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dvTable"></table>

【讨论】：

这移动了整张桌子。 我已经改变了答案。看看 我会尝试并恢复。谢谢

以上是关于如何使用 HTML/CSS 创建第一列固定的表？的主要内容，如果未能解决你的问题，请参考以下文章

如何用css实现 表格第一列固定 其余内容横向滚动

如何固定表格列宽？

具有固定页眉、第一列和页脚的表格 + 向内滚动

可固定列的可滚动表，固定列大小相等

如何从sqlite +phonegap中的表中获取第一列名称

如何使用第一列作为索引从单个矩阵创建矩阵数组？