-
2020-04-26 10:28:05
首先是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” )更多相关内容 -
QT表格固定第一列,拖动时第一列不会遮挡
2021-04-02 11:24:08QT表格固定第一列,有需要的同学下来参考 -
10.html中固定table的第一列.docx
2020-07-14 18:13:32近来浏览一个网页,发现它有一个列表页面,列表中展示的字段特别多,因此数据展示区域产生了横向滚动条,当向左拖动滚动条的时候,表格的第一列和第二列并不随着滚动条的移动而移动。主要信息一直的用户的视线中,... -
移动端table固定表头与固定第一列
2019-02-20 10:36:19移动端项目,移动端table固定表头与固定第一列,HTML5和css3 -
Android可固定表头和第一列自定义表格
2017-04-03 17:16:15Android可固定表头和第一列自定义表格,集成简单。 API使用说明: LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ... -
HTML表格固定第一行第一列效果
2015-11-06 13:47:15在网页上实现类似Excel的效果,数据滚动条拖动固定第一行和第一列,附代码备注,一目了然 -
CSS网页布局入门教程1:一列固定宽度
2020-10-30 16:23:06CSS网页布局入门教程1:一列固定宽度 -
html 表头和第一列固定.html,可拖拽
2019-08-22 18:28:20html table 固定表头和列,下载后,右键浏览器打开运行页面即可看到效果 -
bootstrap-table实现表头固定以及列固定的方法示例
2020-10-17 08:22:51主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
分享一个首行表头和最左列和最右列固定中间滚动的html table样式
2019-12-22 18:27:21一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列... -
js固定表头和第一列固定
2012-03-15 12:32:30js固定表头和第一列固定 可托动,表头会跟着动,列下拉也会动, -
vue表格实现固定表头首列
2020-11-02 12:02:08vue移动端项目 一个可以固定表头首列的表格 ,没有使用UI插件。 感兴趣的朋友可以参考下,希望对大家有所帮助 -
html固定第一行第一列
2014-04-17 17:39:21html固定第一行第一列 其他可以上下左右滚动。。 -
Qt QTreeWidget 固定第一列
2016-03-06 16:45:05Qt 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-01-20 10:57:241、数据较多时需要横向竖向滚动,很多数值记不清谁是谁了,所以需要主要标题内容需要固定。 2、通常的首行首列的固定,下方滚动条左侧会空缺一块,不够美观,我加了一层悬浮的div 给予适应 -
用element-ui给表格第一列固定住不动,其他的滚动
2021-03-31 17:05:17在element-ui里面的table表格上面找到fixed属性后,加到了要固定那个标签上面 但是又遇到这样一个问题 想了半天方法,我们可以给它加上css样式 <style> .el-table .el-table__fixed { height: auto !...在element-ui里面的table表格上面找到fixed属性后,加到了要固定那个标签上面
但是又遇到这样一个问题
想了半天方法,我们可以给它加上css样式<style> .el-table .el-table__fixed { height: auto !important; bottom: 16px; } </style>
这样就可以了在哪行下面都可以进行拖拽滚动条
原因是这个,因为我们用element-ui上面的组件,只是复制了他们的源代码,要在本文件下面或者全局App里面加上css来改变
这是我今天遇到的问题,希望可以帮助你们,网友们
-
Vue多种方法实现表头和首列固定的示例代码
2020-11-27 03:00:53有时表格太大,滚动时信息查看不方便,需要对表格进行全局表头、首列固定, 上效果: 一、创建多个表格进行覆盖 思路:当页面滚动到临界值时,出现固定表头、首列 先创建一个活动表格 <!DOCTYPE html> &... -
实现表格第一列固定
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/
-
移动web table固定表头第一列.rar
2019-06-21 10:26:20移动端项目,移动端table固定表头与固定第一列,HTML5和css3 -
BootStrap自适应Table表格固定左边第一列
2018-07-03 22:51:23所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤记录下来,方便需要的朋友进行查看。一、js文件里加入如下代码var $table = $('.table'); var $fixedColumn = $... -
实现Table表头和列固定
2018-08-01 17:31:29实现表头和列固定,并可行多表头,多列(左右都可以),无错位 -
css固定表头和第一列
2012-02-22 11:29:44css和html固定表头和第一列,可上下拖动和左右拖动 -
表格控件固定首行首列尾列.rplib
2019-08-29 14:22:52AXURE同时表格控件同时固定首行和尾列,相同原理可以实现控制首行首列。. -
一列固定一列自适应布局-flex布局实现
2020-12-24 04:21:15flex布局,弹性盒子布局。声明了display:flex;即变为伸缩容器,在伸缩容器内的所有子元素将自动变成伸缩项目flex ... 伸缩项目单列排列这里利用flex布局实现一列固定,一列自适应.parent{width:100%;height:500px... -
vue移动端复杂表格表头,固定表头与固定第一列
2018-07-28 11:45:09前言 最近做移动端的h5项目,要做一个可配置表头的复杂表格,网上找了很久也没什么好方法,结合网上的一些...第一步:npm install 引入 iscroll npm i iscroll --save 第二步:封装 对插件再做一层封装... -
CSS实现:固定Table表头和第一列
2021-07-15 03:17:55而当横向项目内容太多时,固定第一列(项目列)也是一个很贴心的设计。本文介绍如何用CSS实现固定Table表头和第一列。固定Table表头和第一列CSStable{font-family:"Fraunces",serif;font-size:125%;white-space:nowrap... -
固定table第一列
2016-12-28 09:36:34css:设置tr的第一个子元素为相对定位 tr>:first-child{ width : 66px; position : relative; border : solid #A4D3EE 1px; } js: //固定表格首列 function freezing(){ $("tr>:first-child").css("left",... -
Excel教程,教你如何设置表格第一行和第一列固定不动,一直显示
2020-12-22 14:10:23大家好,昨天有朋友问我,她想要一个表格中的表头固定,不管往下拉到第几行表头都能看到,需要怎么设置?这个小技巧我一直以为大部分人都应该会,所以也就没有拿出来跟大家讲解,跟大家道个歉。让表格中特定的行列...