精华内容
下载资源
问答
  • 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表格固定第一列,有需要的同学下来参考
  • 近来浏览一个网页,发现它有一个列表页面,列表中展示的字段特别多,因此数据展示区域产生了横向滚动条,当向左拖动滚动条的时候,表格的第一列和第二并不随着滚动条的移动而移动。主要信息一直的用户的视线中,...
  • 移动端项目,移动端table固定表头与固定第一列,HTML5和css3
  • Android可固定表头和第一列自定义表格,集成简单。 API使用说明: LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...
  • 在网页上实现类似Excel的效果,数据滚动条拖动固定第一行和第一列,附代码备注,一目了然
  • CSS网页布局入门教程1一列固定宽度
  • html table 固定表头和,下载后,右键浏览器打开运行页面即可看到效果
  • 主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 个首行表头、最左列和最右列固定中间滚动的html table样式。 个首行表头、最左列和最右列固定中间滚动的html table样式。 个首行表头、最左列和最右列固定中间滚动的html table样式。 个首行表头、最左列...
  • js固定表头和第一列固定

    热门讨论 2012-03-15 12:32:30
    js固定表头和第一列固定 可托动,表头会跟着动,列下拉也会动,
  • vue移动端项目 个可以固定表头首的表格 ,没有使用UI插件。 感兴趣的朋友可以参考下,希望对大家有所帮助
  • html固定第一第一列

    2014-04-17 17:39:21
    html固定第一第一列 其他可以上下左右滚动。。
  • 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();
    }
     
    
    展开全文
  • 1、数据较多时需要横向竖向滚动,很多数值记不清谁是谁了,所以需要主要标题内容需要固定。 2、通常的首行首固定,下方滚动条左侧会空缺块,不够美观,我加了层悬浮的div 给予适应
  • 在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来改变

    这是我今天遇到的问题,希望可以帮助你们,网友们

    展开全文
  • 有时表格太大,滚动时信息查看不方便,需要对表格进行全局表头、首列固定, 上效果: 、创建多个表格进行覆盖 思路:当页面滚动到临界值时,出现固定表头、首列 先创建个活动表格 <!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/

    展开全文
  • 移动端项目,移动端table固定表头与固定第一列,HTML5和css3
  • 所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤记录下来,方便需要的朋友进行查看。一、js文件里加入如下代码var $table = $('.table'); var $fixedColumn = $...
  • 实现表头和列固定,并可行多表头,多列(左右都可以),无错位
  • css固定表头和第一列

    2012-02-22 11:29:44
    css和html固定表头和第一列,可上下拖动和左右拖动
  • AXURE同时表格控件同时固定首行和尾,相同原理可以实现控制首行首。.
  • flex布局,弹性盒子布局。声明了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:34
    css:设置tr的第一个子元素为相对定位 tr>:first-child{ width : 66px; position : relative; border : solid #A4D3EE 1px; } js: //固定表格首 function freezing(){ $("tr>:first-child").css("left",...
  • 大家好,昨天有朋友问我,她想要个表格中的表头固定,不管往下拉到几行表头都能看到,需要怎么设置?这个小技巧我一直以为大部分人都应该会,所以也就没有拿出来跟大家讲解,跟大家道个歉。让表格中特定的行列...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 349,586
精华内容 139,834
关键字:

怎么把第一列固定