table th、td设置最大高，超高度出现滚动条

近日做了一个需求，页面中有一个表格，可以上下滑动也可以左右滑动，上下滑动时最上面一行固定住，左右滑动最左侧一竖固定住，中间出现了一下问题。

首先最上和最左固定还是比较好做的最上为th 最左一个th 和每行第一个td

th {position: sticky;top: 0;z-index: 29;
}th:nth-child(1),
td:nth-child(1) {position: sticky;left: 0;
}

使用粘性定位就可以解决

表格是需要有边框的，这里出现问题了，随着表格滑动border居然跟着滚动条划走了。。。所以使用了 outline: 1px solid #000; (轮廓)。

th {position: sticky;top: 0;z-index: 29;outline: 1px solid #000;
}th:nth-child(1),
td:nth-child(1) {position: sticky;left: 0;outline: 1px solid #000;
}

但是table最外侧四根边线显示不出来（我是嵌在app内，根据自己情况而定），但是最右侧就是没有右侧加了一个border

// table的外层元素
.fullscreen {width: 100%;height: 100%;overflow: auto;touch-action: auto;padding: 1px;
}table {border-spacing: 0;border-collapse: collapse;background: #fff;position: relative;border-right: 1px solid #d6d6d6;touch-action: auto;padding: 0 1px;table-layout: fixed;
}

给th、td设置最大高，超出后出现滚动条，未超出按照元素一排最大高

尝试了很多种方法，最后发现没实现，于是直接放弃了th、td。

直接在每个th、td标签内放入一个div 直接设置div的最大高，使其来限制内容的高度来实现。

<tr><th><div class="el_height">内容1</div></th><th><div class="el_height">内容2</div></th><th><div class="el_height">内容3</div></th>
</tr><tr><td><div class="el_height">内容4</div></td><td><div class="el_height">内容5</div></td><td><div class="el_height">内容6</div></td>
</tr>

.el_height {max-height: 85px;overflow-y: auto;
}

其余样式自行按照需求添加，虽然麻烦一点但是可以达到要求，可直接使用v-for 。

有更好的方法欢迎留言！

table th、td设置最大高，超高度出现滚动条相关推荐

td 内容自动换行 table表格td设置宽度后自动换行
td 内容自动换行 table表格td设置宽度后自动换行控制样式 table { table-layout:fixed; WORD-BREAK:break-all; } td { word-wrap ...
php怎么给table添加背景,怎样对table和td设置背景实现表格边框
很多朋友都很苦恼表格样式怎么设置,今天就给大家详细讲解一下css表格样式怎么设置,之前说过三种方法,只对table设置边框,对td设置边框,对table和td技巧性设置表格边框现在给大家带来怎样对ta ...
原生table:表格table中thead固定，tbody超出高度出现滚动条
首先认识一下表格的table-layout属性 tableLayout 属性用来显示表格单元格.行.列的算法规则. tableLayout有如下三个值:auto fixed inherit 值描 ...
给table的td设置了 colspan排版依然乱解决方案
需要效果如图使用colspan的属性进行排版但设置完后变成这样达不到效果查资料后发现得更改table的布局为table-layout: fixed;,td也可以设置需要的宽度,设置后达到效果,代码 ...
html td无边框颜色,table的td设置背景颜色后边框框消失
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
td 内容自动换行 table表格td设置宽度后文字太多自动换行
设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" < ...
table 设置 td 标签宽高
table 设置 td 标签宽高在默认情况下,table 中的 td 不允许使用 css 来设定宽高,需要为 table 改变一些参数之后才可使用 CSS 来随心控制. <table bord ...
html表格td宽度设置,table以及td宽度设置细节
table中table-layout设置 auto 默认值在此设置下如果没有指定table的宽度,则table会根据每列td的宽度自动被撑开,如果没有显示指定td的宽度,则td宽度根据内容而定只到t ...
Javascript操作table,tr,td和表格CSS样式设置小常识
效果良好的表属性设置: <table cellSpacing="0" cellPadding="0" border='1' bordercolor=&qu ...

table th、td设置最大高，超高度出现滚动条

table th、td设置最大高，超高度出现滚动条相关推荐

最新文章

热门文章