首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用Bootstrap在手机上显示表格?

如何使用Bootstrap在手机上显示表格?
EN

Stack Overflow用户
提问于 2013-02-13 11:41:41
回答 3查看 128.1K关注 0票数 92

我的表格在桌面上显示得很好,但是一旦我尝试查看移动版本,我的表格对于移动设备屏幕来说就太宽了。我使用的是响应式布局。

如何设置移动视图的表格宽度?使用Bootstrap在移动视图上显示表格数据还有哪些替代方案?

EN

回答 3

Stack Overflow用户

发布于 2013-02-13 11:49:48

你也可以考虑尝试这些方法中的一种,因为更大的表在移动设备上并不是很友好,即使它可以工作:

http://elvery.net/demo/responsive-tables/

我倾向于“不再有表”,但这显然取决于您的应用程序。

票数 72
EN

Stack Overflow用户

发布于 2013-02-13 11:45:41

bootstrap中的所有表都根据它们所在的容器进行拉伸。您可以将表放在.span元素中以控制其大小。这个SO问题可能会对你有所帮助。

Why do Twitter Bootstrap tables always have 100% width?

票数 5
EN

Stack Overflow用户

发布于 2020-11-15 00:00:19

经过近1个月的研究,我发现下面的代码在我的网站上运行得非常漂亮,100%完美。要检查预览是如何工作的,您可以通过链接进行检查。https://www.jobsedit.in/state-government-jobs/

https://www.jobsrob.in/category/central-government-jobs/

CSS代码

代码语言:javascript
复制
@media only screen and (max-width: 500px)  {
    .resp table  { 
        display: block ; 
    }   
    .resp th  { 
        position: absolute;
        top: -9999px;
        left: -9999px;
        display:block ;
    }   
     .resp tr { 
    border: 1px solid #ccc;
    display:block;
    }   
    .resp td  { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        width:100%;
        background-color:White;
        text-indent: 50%; 
        text-align:left;
        padding-left: 0px;
        display:block;      
    }
    .resp  td:nth-child(1)  {
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        font-size:20px;
        text-indent: 0%;
        text-align:center;
}   
    .resp td:before  { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        text-indent: 0%;
        text-align:left;
        white-space: nowrap;
        background-color:White;
        font-weight:bold;
    }
    /*
    Label the data
    */
    .resp td:nth-of-type(2):before  { content: attr(data-th) }
    .resp td:nth-of-type(3):before  { content: attr(data-th) }
    .resp td:nth-of-type(4):before  { content: attr(data-th) }
    .resp td:nth-of-type(5):before  { content: attr(data-th) }
    .resp td:nth-of-type(6):before  { content: attr(data-th) }
    .resp td:nth-of-type(7):before  { content: attr(data-th) }
    .resp td:nth-of-type(8):before  { content: attr(data-th) }
    .resp td:nth-of-type(9):before  { content: attr(data-th) }
    .resp td:nth-of-type(10):before  { content: attr(data-th) }
}

HTML代码--

代码语言:javascript
复制
<table>
<tr>
<td data-th="Heading 1"></td>
<td data-th="Heading 2"></td>
<td data-th="Heading 3"></td>
<td data-th="Heading 4"></td>
<td data-th="Heading 5"></td>
</tr>
</table>
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14846026

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档