怎么把第一列固定

实现表格第一列固定

千次阅读 2018-05-21 11:51:30

这个功能的难点在于：如果把第一列从表格中抽出，行无法对齐。 (3) 已有解决方案网上有很多解决方案：固定表格高度，只能显示一列。将第一列抽出固定在最左。 js动态计算各高度对于这些方案要不过于繁琐...

背景



(1) 需求

固定表格的第一列，其余列可以左右滑动。这样的需求往往出现在移动端的表格显示。



(2) 难点

这个功能的难点在于：如果把第一列从表格中抽出，行无法对齐。



(3) 已有解决方案

网上有很多解决方案：


固定表格高度，只能显示一列。将第一列抽出固定在最左。
js动态计算各高度


对于这些方案要不过于繁琐复杂，要不单行显示不利于用户体验。



实现

对于这样的问题，我希望用最简单的方式去解决，避免过多的性能消耗，也更利于维护。

(1) 实现思路

渲染两个表格，其中一个绝对定位覆盖在另外一个表格上并隐藏非第一列。



(2) 缺点

表格html内容渲染了两次。



(3) demo



table{border-bottom: solid 1px black;  border-left: solid 1px black;}
td { border-right: solid 1px black;  border-top: solid 1px black; padding: 10px;}

.container{  position: relative;}

.table1-container, .table2-container{ width: 220px; }

.table1-container{ position: absolute; left: 0; top: 0; overflow: hidden; color: red;}
.table1-container td:first-child{ background-color: white;}
.table1-container td:not(:first-child){ visibility: hidden;}

.table2-container{overflow: scroll;}

<div class='container'>
  <div  class="table1-container">
    <table  border=0 cellpadding="0" cellspacing="0" >
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
      <td>1-6</td>
      <td>1-7</td>
      <td>1-8</td>
    </tr>
     <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
      <td>2-5</td>
      <td>2-6</td>
      <td>2-7</td>
      <td>2-8</td>
    </tr>
     <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
      <td>3-5</td>
      <td>3-6</td>
      <td>3-7</td>
      <td>3-8</td>
    </tr>
    <tr>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
      <td>4-5</td>
      <td>4-6</td>
      <td>4-7</td>
      <td>4-8</td>
    </tr>
  </table>
</div>
<div class="table2-container">
  <table   border=0 cellpadding="0" cellspacing="0" >
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
      <td>1-6</td>
      <td>1-7</td>
      <td>1-8</td>
    </tr>
     <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
      <td>2-5</td>
      <td>2-6</td>
      <td>2-7</td>
      <td>2-8</td>
    </tr>
     <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
      <td>3-5</td>
      <td>3-6</td>
      <td>3-7</td>
      <td>3-8</td>
    </tr>
    <tr>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
      <td>4-5</td>
      <td>4-6</td>
      <td>4-7</td>
      <td>4-8</td>
    </tr>
  </table>
  </div>
</div>

完整demo: https://jsfiddle.net/9hdLarfj/

收起

展开全文

Qt QTreeWidget 固定第一列

千次阅读 2016-03-06 16:45:05

Qt QTreeWidget 固定第一列

Qt 有一个demo "Frozen Column Example"是QTableView固定第一列，我仿照着写了一个QTreeWidget固定第一列。


头文件 “QFrozenTreeWidget.h”


#ifndef QFROZENTREEWIDGET_H
#define QFROZENTREEWIDGET_H


#include <QTreeWidget>
#include <QTreeWidgetItem>
#include <QResizeEvent>

//定位结构体，用来存储 展合、勾选 的item位置
struct structIndex
{
    int m_index;
    structIndex *m_pChildIndex;
    structIndex()
    {
        m_index = -1;
        m_pChildIndex = NULL;
    }
};

class QFrozenTreeWidget : public QTreeWidget
{
    Q_OBJECT

public:
    QFrozenTreeWidget(QWidget *parent = 0);
    ~QFrozenTreeWidget();

    //接口
public:
    void SetFrozenColumnHeader(const QString &strHeader);
    void CreateNewItem(QTreeWidgetItem *item);

protected:
    void resizeEvent(QResizeEvent *event);
    QModelIndex moveCursor(CursorAction cursorAction, Qt::KeyboardModifiers modifiers);
    void scrollTo(const QModelIndex &index, ScrollHint hint);

private:
    void Init();
    void UpdateFrozenTreeGeometry();

    /*
     * 用来 从 固定列和本树 找对应的item
     * 比如 固定列某个item展开,要找到本树的对应位置item让其展开，实现同步
     * 下面是递归方法
     * 可能还有简单方法，比如：
     * 可以根据 鼠标位置 找到对应item,用itemAt(QPoint);
     * 可以根据 item 对应的QModelIndex 里row() 采用加法找到对应item，有兴趣的可以实现试试
     */
    structIndex *GetItemIndex(QTreeWidgetItem *targetItem, QTreeWidgetItem *sourceItem);
    QTreeWidgetItem *GetItemFromIndex(QTreeWidgetItem *item, structIndex *index);
    QTreeWidgetItem *GetItemFromItem(QTreeWidget *targetTree, QTreeWidgetItem *souceItem);


    /*
     * 下面实现同步勾选
     */
    void SetParentCheckState(QTreeWidgetItem *parentItem);
    void SetChildCheckState(QTreeWidgetItem *selfItem);
    void SetItemChecked(QTreeWidgetItem *item);

private slots:
    void OnItemCollapsed(QTreeWidgetItem *item);
    void OnItemExpanded(QTreeWidgetItem *item);
    void OnItemChanged(QTreeWidgetItem *item, int column);
    void UpdateSectionWidthSlot(int logicalIndex, int, int newSize);

private:
    QTreeWidget *m_pFrozenTreeWidget;   //固定的第一列，覆盖在本树第一列位置，实现第一列保持不动
};

#endif // QFROZENTREEWIDGET_H


cpp文件 "QFrozenTreeWidget.cpp"
#include <QHeaderView>
#include <QScrollBar>
#include "QFrozenTreeWidget.h"
QFrozenTreeWidget::QFrozenTreeWidget(QWidget *parent)
    : QTreeWidget(parent)
{
    Init();
}
QFrozenTreeWidget::~QFrozenTreeWidget()
{
}
void QFrozenTreeWidget::SetFrozenColumnHeader(const QString &strHeader)
{
    m_pFrozenTreeWidget->setHeaderLabel(strHeader);
}
void QFrozenTreeWidget::resizeEvent(QResizeEvent *event)
{
    QTreeWidget::resizeEvent(event);
    UpdateFrozenTreeGeometry();
}
QModelIndex QFrozenTreeWidget::moveCursor(QAbstractItemView::CursorAction cursorAction, Qt::KeyboardModifiers modifiers)
{
    QModelIndex current = QTreeWidget::moveCursor(cursorAction, modifiers);
    if (cursorAction == MoveLeft && current.column() > 0
            && visualRect(current).topLeft().x() < m_pFrozenTreeWidget->columnWidth(0))
    {
        const int newValue = horizontalScrollBar()->value() + visualRect(current).topLeft().x()
                - m_pFrozenTreeWidget->columnWidth(0);
        horizontalScrollBar()->setValue(newValue);
    }
    return current;
}
void QFrozenTreeWidget::scrollTo(const QModelIndex &index, QAbstractItemView::ScrollHint hint)
{
    if (index.column() > 0)
    {
        QTreeWidget::scrollTo(index, hint);
    }
}
void QFrozenTreeWidget::Init()
{
    m_pFrozenTreeWidget = new QTreeWidget(this);
    m_pFrozenTreeWidget->setFocusPolicy(Qt::NoFocus);
    //让固定列宽度不能手动调整大小，而跟随本树第一列大小来改变
    m_pFrozenTreeWidget->header()->setSectionResizeMode(QHeaderView::Fixed);
    //让浮在本树上边而不是下边
    viewport()->stackUnder(m_pFrozenTreeWidget);
    //设置第一列背景颜色好显示效果
    m_pFrozenTreeWidget->setStyleSheet("QTreeView { border: none;"
                                       "background-color: #8ede21;"
                                       "selection-background-color: #999 }");
    //设置选择模式一样
    m_pFrozenTreeWidget->setSelectionModel(selectionModel());
    //设置第一列宽度一样
    m_pFrozenTreeWidget->setColumnWidth(0, columnWidth(0));
    //固定列不需要水平垂直滚动条，用本列的来控制
    m_pFrozenTreeWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    m_pFrozenTreeWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    m_pFrozenTreeWidget->show();
    //设置滚动条模式按像素为单位滚动
    setHorizontalScrollMode(ScrollPerPixel);
    setVerticalScrollMode(ScrollPerPixel);
    m_pFrozenTreeWidget->setVerticalScrollMode(ScrollPerPixel);
    connect(header(), SIGNAL(sectionResized(int,int,int)), this, SLOT(UpdateSectionWidthSlot(int,int,int)));
    //连接垂直滚动条的信号槽实现同步滚动
    connect(m_pFrozenTreeWidget->verticalScrollBar(), SIGNAL(valueChanged(int)), verticalScrollBar(), SLOT(setValue(int)));
    connect(verticalScrollBar(), SIGNAL(valueChanged(int)), m_pFrozenTreeWidget->verticalScrollBar(), SLOT(setValue(int)));
    //item 展合
    connect(m_pFrozenTreeWidget, SIGNAL(itemCollapsed(QTreeWidgetItem*)), this, SLOT(OnItemCollapsed(QTreeWidgetItem*)));
    connect(m_pFrozenTreeWidget, SIGNAL(itemExpanded(QTreeWidgetItem*)), this, SLOT(OnItemExpanded(QTreeWidgetItem*)));
    //第一列item勾选
    connect(m_pFrozenTreeWidget, SIGNAL(itemChanged(QTreeWidgetItem*,int)), this, SLOT(OnItemChanged(QTreeWidgetItem*,int)));
}
void QFrozenTreeWidget::UpdateFrozenTreeGeometry()
{
    m_pFrozenTreeWidget->setGeometry(frameWidth(), frameWidth(), columnWidth(0), viewport()->height() + header()->height());
}
structIndex *QFrozenTreeWidget::GetItemIndex(QTreeWidgetItem *targetItem, QTreeWidgetItem *sourceItem)
{
    if (targetItem == sourceItem)
    {
        return new structIndex;
    }
    for (int i = 0; i < targetItem->childCount(); ++i)
    {
        structIndex *pChildStructIndex = GetItemIndex(targetItem->child(i), sourceItem);
        if (pChildStructIndex != NULL)
        {
            structIndex *pStructIndex = new structIndex;
            pStructIndex->m_pChildIndex = pChildStructIndex;
            pStructIndex->m_index = i;
            return pStructIndex;
        }
    }
    return NULL;
}
QTreeWidgetItem *QFrozenTreeWidget::GetItemFromIndex(QTreeWidgetItem *item, structIndex *index)
{
    if (index->m_index == -1)
    {
        return item;
    }
    QTreeWidgetItem *targetItem = GetItemFromIndex(item->child(index->m_index), index->m_pChildIndex);
    if (index->m_pChildIndex != NULL)
    {
        delete index->m_pChildIndex;
        index->m_pChildIndex = NULL;
    }
    return targetItem;
}
QTreeWidgetItem *QFrozenTreeWidget::GetItemFromItem(QTreeWidget *targetTree, QTreeWidgetItem *souceItem)
{
    structIndex *pStructIndex = GetItemIndex(souceItem->treeWidget()->invisibleRootItem(), souceItem);
    QTreeWidgetItem *item = GetItemFromIndex(targetTree->invisibleRootItem(), pStructIndex);
    delete pStructIndex;
    return item;
}
void QFrozenTreeWidget::SetParentCheckState(QTreeWidgetItem *parentItem)
{
    if (parentItem == NULL)
    {
        return;
    }
    int count = 0;
    for (int i = 0; i < parentItem->childCount(); ++i)
    {
        if (parentItem->child(i)->checkState(0) == Qt::Checked)
        {
            count++;
        }
    }
    if (count == parentItem->childCount())
    {
        parentItem->setCheckState(0, Qt::Checked);
    }
    else
    {
        parentItem->setCheckState(0, Qt::Unchecked);
    }
    GetItemFromItem(this, parentItem)->setCheckState(0, parentItem->checkState(0));
    SetParentCheckState(parentItem->parent());
}
void QFrozenTreeWidget::SetChildCheckState(QTreeWidgetItem *selfItem)
{
    for (int i = 0; i < selfItem->childCount(); ++i)
    {
        selfItem->child(i)->setCheckState(0, selfItem->checkState(0));
        GetItemFromItem(this, selfItem->child(i))->setCheckState(0, selfItem->checkState(0));
        SetChildCheckState(selfItem->child(i));
    }
}
void QFrozenTreeWidget::SetItemChecked(QTreeWidgetItem *item)
{
    QTreeWidgetItem *targetItem = GetItemFromItem(m_pFrozenTreeWidget, item);
    targetItem->setCheckState(0, item->checkState(0));
}
void QFrozenTreeWidget::CreateNewItem(QTreeWidgetItem *item)
{
    QTreeWidgetItem *newItem = NULL;
    if (item->parent() == NULL)
    {
        newItem = new QTreeWidgetItem(GetItemFromItem(m_pFrozenTreeWidget, m_pFrozenTreeWidget->invisibleRootItem()));
    }
    else
    {
        newItem = new QTreeWidgetItem(GetItemFromItem(m_pFrozenTreeWidget, item->parent()));
    }
    newItem->setCheckState(0, Qt::Unchecked);
    newItem->setText(0, item->text(0));
}
void QFrozenTreeWidget::OnItemCollapsed(QTreeWidgetItem *item)
{
    collapseItem(GetItemFromItem(this, item));
}
void QFrozenTreeWidget::OnItemExpanded(QTreeWidgetItem *item)
{
    expandItem(GetItemFromItem(this, item));
}
void QFrozenTreeWidget::OnItemChanged(QTreeWidgetItem *item, int column)
{
    GetItemFromItem(this, item)->setCheckState(column, item->checkState(column));
    m_pFrozenTreeWidget->blockSignals(true);
    SetChildCheckState(item);
    SetParentCheckState(item->parent());
    m_pFrozenTreeWidget->blockSignals(false);
}
void QFrozenTreeWidget::UpdateSectionWidthSlot(int logicalIndex, int, int newSize)
{
    if (logicalIndex == 0)
    {
        m_pFrozenTreeWidget->setColumnWidth(0, newSize);
        UpdateFrozenTreeGeometry();
    }
}



"main.cpp"
#include "QFrozenTreeWidget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QFrozenTreeWidget w;
    w.setColumnCount(5);
    w.setHeaderLabels(QStringList() << "A" << "B" << "C" << "D" << "E");
    w.SetFrozenColumnHeader("A");
    for (int i = 0; i < 5; ++i)
    {
        QTreeWidgetItem *parent = new QTreeWidgetItem(w.invisibleRootItem(), QStringList() << QString("%1a").arg(i) << QString("%1b").arg(i) << QString("%1c").arg(i) << QString("%1d").arg(i) << QString("%1e").arg(i));
        w.CreateNewItem(parent);
        for (int j = 0; j < 5; ++j)
        {
            QTreeWidgetItem *child = new QTreeWidgetItem(parent,
                                        QStringList() << QString("a%1%2").arg(i).arg(j)
                                        << QString("b%1%2").arg(i).arg(j)
                                        << QString("c%1%2").arg(i).arg(j)
                                        << QString("d%1%2").arg(i).arg(j)
                                        << QString("e%1%2").arg(i).arg(j));
            w.CreateNewItem(child);
        }
    }
    w.resize(400, 300);
    w.setColumnWidth(0, 100);
    w.show();
    return a.exec();
}

收起

展开全文

table表格实现第一列固定

2020-04-26 10:28:05

首先是css的样式，根据自己页面再调整宽高之类的属性，这里是我自己页面的： table { table-layout:fixed; } th { position:-webkit-sticky; position:sticky; } thead tr th { top:0;... z-index:1; width:200px} ...

首先是css的样式，根据自己页面再调整宽高之类的属性，这里是我自己页面的：

table { table-layout:fixed; }

th { position:-webkit-sticky; position:sticky; }

thead tr th { top:0; }

thead tr th:first-of-type { left:0; z-index:1; width:200px}

tbody th { left:0; width:200px}

th, td {

text-align:center;

vertical-align:middle;

width:150px;

}

th {

padding:10px;

}

再就是html标签

表格头table>thead>tr>th（第一个th标签加上 scope=“col”）

表格主体tbody>tr>(第一个用th标签，后面的就是td标签，th标签加上 scope=“row” )

收起

展开全文

css html html5

ionic实现表格头部和第一列固定且都可滚动

万次阅读 2016-09-30 16:12:19

由于移动端屏幕有限，在展示多行多列的表格类型数据时，需要做成可滚动的来展示，但是滚动的时候，我们需要表头和第一列固定，以便在滚动的时候，可以看到该行、该列所属。


转载请注明出处：
http://blog.csdn.net/lishihong108/article/details/52712064

由于移动端屏幕有限，在展示多行多列的表格类型数据时，需要做成可滚动的来展示，但是滚动的时候，我们需要表头和第一列固定，以便在滚动的时候，可以看到该行、该列所属。如图所示：

　　

　　

　　在横向滚动的时候，第一列[地区]保持不动，方便用户查看所属地区；纵向滚动时候，表头保持不动。

　　具体实现，先将这个布局划分为4部分，如下：

　　
第一个部分就是个简单的单元格，绿色部分是一个横向滚动区域，蓝色部分是一个纵向滚动区域，紫色部分是即可纵向又可横向滚动的区域。接下来就是用ionic自带的组件ion-scroll来实现4部分布局，然后再根据滑动的方向判断。当横向滑动紫色部分x距离，则绿色部分跟着滑动x距离；当纵向滑动紫色部分y距离，则蓝色部分跟着滑动y距离。接下来看代码具体实现，在布局上有一点要注意的是，要保持这个表格的协调，每个单元格要固定宽高度。
单元格css样式代码:
<style type="text/css">
	 .head{
	 	border-bottom:solid 1px #D1D3D6;
	 	border-right:solid 1px #D1D3D6;
	 	height:50px;
	 	display:flex;
	 	align-items:center;
	 	width:125px;
	 	font-size:14px;
	 	color:#262626;
	 	justify-content:center;
	 } 
</style> 

页面代码:
<ion-view view-title="表格首行首列固定">  
    <ion-content overflow-scroll="false">
    	<div style="display:flex;width:625px;">
			<div class="head">地区</div>
			<div style="overflow: hidden;white-space: nowrap;width:250px;"> 
				<ion-scroll direction="x" scrollbar-x="false" overflow-scroll="false" has-bouncing="false" delegate-handle="headContainerHandle" on-scroll="noScroll()" style="margin-top:0;">
					<div style="display:flex;width:500px;">
						<div class="head">到件量</div>
						<div class="head">出仓量</div>
						<div class="head">滞留量</div>
						<div class="head" style="border-right:0;">未派送量</div> 
					</div>
				</ion-scroll> 
			</div>
		</div>
		<div style="display:flex;width:625px;">
			<ion-scroll direction="y" scrollbar-y="false" overflow-scroll="false" has-bouncing="false" delegate-handle="leftContainerHandle" on-scroll="noScroll()" style="height:{{h}}px;">
				<div ng-repeat="d in data" class="head">
					{{d.zoneName}}
				</div> 
			</ion-scroll>
			<div style="overflow: hidden;white-space: nowrap;width:250px;"> 
				<ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false" overflow-scroll="false" has-bouncing="false" on-scroll="scrollRightHorizon()" delegate-handle="rightContainerHandle" style="height:{{h}}px;">
					<div style="width:500px;"> 
						<div ng-repeat="d in data" style="display:flex;">
							<div class="head">
								{{d.arriveTickets}}
							</div> 
							<div class="head">
								{{d.moniOutCnt}}
							</div>
							<div class="head">
								{{d.moniStayCnt}}
							</div>
							<div class="head" style="border-right:0;">
								{{d.moniUndeliveryCnt}}
							</div>
						</div>
					</div>
				</ion-scroll> 
			</div>
		</div> 
    </ion-content> 
</ion-view>

controller里面的代码:
$scope.data=[
		{'zoneName':'广州区','arriveTickets':'6987','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'深圳区','arriveTickets':'2356','moniOutCnt':'331','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'武汉区','arriveTickets':'6744','moniOutCnt':'2621','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'苏州区','arriveTickets':'6542','moniOutCnt':'2881','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'杭州区','arriveTickets':'2367','moniOutCnt':'5621','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'东莞区','arriveTickets':'1129','moniOutCnt':'1221','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'惠州区','arriveTickets':'7893','moniOutCnt':'4521','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'汕头区','arriveTickets':'2356','moniOutCnt':'7821','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'清远区','arriveTickets':'67554','moniOutCnt':'9921','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'长沙区','arriveTickets':'5534','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'岳阳区','arriveTickets':'6643','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'株洲区','arriveTickets':'6546','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},
		{'zoneName':'南充区','arriveTickets':'4353','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'}, 
		{'zoneName':'鞍山区','arriveTickets':'4526','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'}
	];
	$scope.h=Math.min(document.documentElement.clientHeight,window.innerHeight)-44-50;
	$scope.scrollRightHorizon=function(){
		var rightHandle = $ionicScrollDelegate.$getByHandle("rightContainerHandle");
		var headHandle = $ionicScrollDelegate.$getByHandle("headContainerHandle");
		var leftHandle = $ionicScrollDelegate.$getByHandle("leftContainerHandle");
		headHandle.scrollTo(rightHandle.getScrollPosition().left,0,false);
		leftHandle.scrollTo(0,rightHandle.getScrollPosition().top,false);
	}; 
	$scope.noScroll=function(){
		var headHandle = $ionicScrollDelegate.$getByHandle("headContainerHandle");
		headHandle.freezeScroll(true);
		var leftHandle = $ionicScrollDelegate.$getByHandle("leftContainerHandle");
		leftHandle.freezeScroll(true);
	};

controller里面， $s c o p e . d a t a 是 数 据 ，$ scope.h是通过屏幕的高度-减去标题栏的高度44-表头的高度50，然后把这个高度设置给纵向滚动的ion-scroll的高度。on-scroll事件是ion-scroll组件滚动的时候触发的，当紫色部分横向滚动时候，调整绿色部分滚动组件的横向滚动；当紫色部分纵向滚动时候，调整蓝色部分的滚动组件的纵向滚动；之所以绿色部分和蓝色部分滚动组件的滚动是为了防止滚动时候不断的相互触发滚动，引起冲突，也造成了该方案的一个缺点，就是必须手在紫色部分才可以操作滑动。

收起

展开全文

ionic 表格

固定table第一列
万次阅读 2016-12-28 09:36:34
css：设置tr的第一个子元素为相对定位 tr>:first-child{ width : 66px; position : relative; border : solid #A4D3EE 1px; } js: //固定表格首列 function freezing(){ $("tr>:first-child").css("left",...
收起
js
table第一列水平固定，垂直可滚动
千次阅读 2018-08-20 12:52:31
table第一列水平固定，垂直可滚动既然有固定的话首先需要想到给table的第一列加上固定定位 #divTable >>> table tr td:nth-child(1) {position: fixed;} 但是此时table的第一列无论上下、...
收起
vue 滚动事件
flex中表格第一列固定
千次阅读 2008-11-10 15:00:00
设置网格中的lockedColumnCount="1"（固定列数）例：http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> lockedColumnCount="1"
收起
flex datagrid user encoding
如何将confluence表格的第一行或者第一列固定
万次阅读 2016-11-01 13:43:09
可使用这个免费的插件 ... 也可从 http://download.csdn.net/detail/fabbychips/9669922 ...1.先选中表格 ...3.在“Tableenhancer”宏编辑界面，找到“Number of rows to keep visible”，设置固定的行数就可以了
收起
confluence 插件
表格第一列固定，右边内容可以左右滑动
2016-05-10 10:58:00
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><...表格第一列固定，右边内容可以左右滑动</title><styletype="text/css">*{margin:0;padding:0}.table...
收起
vue移动端复杂表格表头，固定表头与固定第一列
万次阅读 热门讨论 2018-07-28 11:45:09
前言最近做移动端的h5项目，要做一个可配置表头的复杂表格，网上找了很久也没什么好方法，结合网上的一些...第一步：npm install 引入 iscroll npm i iscroll --save 第二步：封装对插件再做一层封装...
收起
移动端
boostrap固定第一列,其他列可以滚动
2019-07-23 18:26:25
“冻结列”，j就是列比较多，需要固定前面的几列，后面的列滚动。引入: bootstrap-table-fixed-columns.js bootstrap-table-fixed-columns.css
收起
BootStrap自适应Table表格固定左边第一列
万次阅读 2018-07-03 22:51:23
所谓第一列固定，就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法，现将具体的操作步骤记录下来，方便需要的朋友进行查看。一、js文件里加入如下代码var $table = $('.table'); var $fixedColumn = $...
收起
android股票联动_第一列固定其他列可左右上下滑动
千次阅读 2016-07-13 10:32:38
最近需要做一个股票联动的效果，这个效果说难不难，可是需要处理好多的事情，于是就找了一些开源的代码模仿着做了一下，...第一步需要重写HorizontalScrollView，使其可以添加一个可以随之滑动的View 代码如下publi
收起
android 股票
固定表头和第一列、内容可滚动的table表格
万次阅读 2018-07-25 08:51:57
鉴于之前有几个项目都用到了第一行第一列固定不动的表格，所以整理了一下制作这种表格的方法。基本原理是把表格分为四个部分，左上角是固定不动的，第一行和第一列是半固定的，只能左右移动或者上下移动，...
收起
使用css固定table第一列
千次阅读 2017-05-23 23:53:00
使用css固定table第一列 title > < link href ="css/table.css" rel ="stylesheet" /> head > < body > < div class ="table" > < table class ="fixedTable" border ="1" > < tr >< td > ...
收起
excel固定(冻结)第一行和第一列
2009-10-13 21:59:38
固定首列和首行的方法: 选中B2单元格然后菜单栏→窗口→冻结窗口固定首行的方法: 选择第二行然后冻结窗口
收起
Excel
Element表格固定第一列和第一行，并通过属性名动态渲染数据
2020-09-28 11:44:00
Element表格固定第一列和第一行，并通过属性名动态渲染数据 <el-table :data="sentimentData" style="width: 680px"> <el-table-column fixed prop="name" label="区域" width="100"> <...
收起
vue.js
table固定表头并且固定左边第一列的纯粹css实现
千次阅读 2020-03-25 15:53:49
以下是网页版的，小程序版本的因为小程序没有table tr tb th这些标签所以你可以通过view lable模拟出来（也是可以直接做到的我有时间在放出来） 99x99 × 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
收起
css html
CSS 移动端固定表格的第一列，其余内容超出可以滚动
千次阅读 2019-03-27 11:35:06
这几天做项目，需要做表格，将第一列固定不动，其他的超出的内容可以滚动，网上查了很多办法，刚开始写的是第一列一个表格，其他内容一个表格。给其他内容设置滚动条。（内容随着后台一直添加，长短不一）遇到的...
收起
css vue
dataTable固定列固定行
千次阅读 2018-07-30 16:05:04
直接贴代码引入样式文件 <link type="text/css" href="css/fixedColumns.bootstrap.css" /> <link type="text/css" href="... &
收起

实现表格第一列固定

背景

(1) 需求

(2) 难点

(3) 已有解决方案

实现

(1) 实现思路

(2) 缺点

(3) demo

Qt QTreeWidget 固定第一列

table表格实现第一列固定

ionic实现表格头部和第一列固定且都可滚动

固定table第一列

table第一列水平固定，垂直可滚动

flex中表格第一列固定

如何将confluence表格的第一行或者第一列固定

表格第一列固定，右边内容可以左右滑动

vue移动端复杂表格表头，固定表头与固定第一列

boostrap固定第一列,其他列可以滚动

BootStrap自适应Table表格固定左边第一列

android股票联动_第一列固定其他列可左右上下滑动

固定表头和第一列、内容可滚动的table表格

使用css固定table第一列

excel固定(冻结)第一行和第一列

Element表格固定第一列和第一行，并通过属性名动态渲染数据

table固定表头并且固定左边第一列的纯粹css实现

CSS 移动端固定表格的第一列，其余内容超出可以滚动

dataTable固定列固定行

怎么把第一列固定