html5 自动适应,响应式表格,HTML表格自适应

Posted 2022-08-07 格格巫 MMQ!!

如何设置html页⾯⾃适应宽度的table（表格）

（⼀）WEB应⽤的页⾯，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容⾃适应到不同分辨率的屏幕，这应该是⼀个⽐较容易遇到的问题，下⾯就来谈⼀谈我对这类问题的解决与看法。

将所有列设置为固定宽度，显然是不能满⾜此类要求的，但是若把全部的列都设置为百分⽐，恐怕在某些尺⼨，或分辨率下，会变得很难看。在Bigtree看来，⽐较习惯于⽤如下的⽅式来处理——在表格列数不是很多的前提下——将⼤部分列宽⽤固定值设置死，留下⼀列不设置宽度，将table的宽度设置为屏幕的百分⽐（譬如95%、98%等）。
例：

……

序号

分类A

分类B

名称

说明

操作

在本例中，名为“说明”的列，内容⽐较长，个⼈认为可以将此列设置为浮动宽度列，⽤以⾃适应页⾯的宽度。 但是当该表格中出现长度⽐列幅宽的半⾓字符时，td的宽度会被内容撑破，应该如何解决呢？

解决此问题的⽅法是：在明细⾏的td中，追加 style=“word-wrap:break-word;”，这样做可以使半⾓连续字符强制换⾏，不⾄于撑破列宽。
例：

……

应⽤此⽅法，针对设置了width宽度的td列可以解决，但是如果没有设置宽度的td列，是⽆法⽣效还是会被撑破td的，应该如何解决呢？
解决此问题的⽅法是：在定义表格时，追加 style=“table-layout:fixed;”，这样做可以使半⾓连续字符强制换⾏，不⾄于撑破列宽。需要注意的是，使⽤此参数后， 不要轻易在tr(⾏)或td(列)中加⼊height属性，会使table不再被内容撑出适合的⾼度。
例：

…… 此⽅法适⽤于IE与FireFox浏览器。

第二种：

.table-container

width: 100%;

overflow-y: auto;

_overflow: auto;

margin: 0 0 1em;

tableborder:0; border-collapse:collapse;

table td,table thborder:1px solid #999; padding:.5em 1em

//添加ios下滚动条

.table-container::-webkit-scrollbar

-webkit-appearance: none;

width: 14px;

height: 14px;

.table-container::-webkit-scrollbar-thumb

border-radius: 8px;

border: 3px solid #fff;

background-color: rgba(0, 0, 0, .3);

bootstrap3自适应表格

Bootstrap3.0也类似这样子的简单自适应，当屏幕小于767像素时，表格就会自适应，多的隐藏可以滚动。

//code from http://caibaojian.com/responsive-tables.html

@media (max-width: 767px)

.table-responsive

width: 100%;

margin-bottom: 15px;

overflow-x: scroll;

overflow-y: hidden;

border: 1px solid #dddddd;

-ms-overflow-style: -ms-autohiding-scrollbar;

-webkit-overflow-scrolling: touch;

.table-responsive > .table

margin-bottom: 0;

.table-responsive > .table > thead > tr > th,

.table-responsive > .table > tbody > tr > th,

.table-responsive > .table > tfoot > tr > th,

.table-responsive > .table > thead > tr > td,

.table-responsive > .table > tbody > tr > td,

.table-responsive > .table > tfoot > tr > td

white-space: nowrap;