网页中table表格适配完美解决方法
最近更新时间: December 12, 2023
如果网页中的table表格单元格中的内容过多过长，或者超出页面范围(或者规定的宽度)，那么大概率会在手机端出现表格显示不全(这种情况不仅在手机端而且在电脑端也会出现。)或者超出屏幕范围等不兼容的现象，甚至有时候还会撑破表格中的单元格，使得整个表格看起来非常混乱，尤其是在我们规定了宽高尺寸，并且使用overflow: hidden;属性的时候。
talbe表格内容会显示不全，如图右边和下边
这里有两种方法都可以解决，在这之前，先说一下网页中table表格的一些常规设置注意事项。
① table表格一般都会有一个div元素包含，div设置我们想要的宽高，即表格的宽高;table的宽度一般设置为width: 100%;。
② 不建议使用overflow: hidden;属性，尤其时在固定宽度和高度的时候，会导致表格显示不全，并且当高度固定的时候再使用该属性会很难解决表格高度显示不全的问题。但是可以使用overflow: scroll;属性设置超出部分滑动查看。
③ 一般情况下在表格table中设置border-collapse: collapse;这样可以使表格边框合并成为一个单一边框。
④ td, th 一般不设置具体宽高，但是可以设置内外边距。
⑤ 单元格的box-sizing: border-box;属性，可以帮助我们设置边框为内边框，这就不会增加单元格的宽度或者高度。
⑥ 单元格的word-break: break-word;属性值表示单元格会根据字词断行，这个属性在固定的表格宽度，且想让表格内容全显示的时候经常会用到(尤其是英文数字参数的时候，用这个属性英语单词不会拆开)，弊端是会对整个单词进行拆分，所以也要慎重使用。
⑦ overflow-wrap,可以看作为word-break的补充，比如当同时使用word-break: break-all;和overflow-wrap: break-word;时即只有当一个单词在一整行中显示不下时，才会拆分该单词进行换行;其它没有超出整行的单词则不会拆分换行。
⑧ white-space: normal;该属性可以控制换行，默认情况下为normal-自动换行，当其属性值为nowrap是则为不换行，通常情况下我们默认就可以。
然后我们来说两种常见的解决方法：
第一种：使用word-break: break-word;属性,使单元格内容自动换行。
这个在上面我们已经说过，当table表格的宽高已经固定，因为表格内容过多导致显示不全时，我们可以使用word-break: break-word;使其进行换行，来解决这个问题。
注意看红色边框里面的内容已经换行
第二种：固定表格头部和侧边栏，配合overflow: scroll;属性通过滑动方式查看多出的表格内容，并且不会超出表格规定的宽高。
左右或者上下滑动就可以看到多出来的单元格内容，根据需要对表格头部或者侧栏锁定
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--手机端自适应适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css";>
body {
width:100%;
margin:0px auto;
}
/*设置div宽高*/
.table-dajian {
overflow:scroll;/* 超出设置的高度后采取滚动下拉条 */
height:200px;/* 设置高度 */
width: 98%;/* 设置宽度 */
margin: 10px auto;
border-left: 1px solid #EBEBEB;/* 设置div左边框 避免表格向左滑动时左边框消失 */
border-bottom: 1px solid #EBEBEB;/* 设置div底部边框 避免表格向下滑动时左边框消失 */
}
table {
border-collapse: collapse;/*表格边框会合并为一个单一的边框 默认值为：separate 不要设置到td th层级 没有用*/
width: 100%;
}
td, th {/* 单元格宽度可以不设置 */
border:1px solid #EBEBEB;
padding:0px 5px;
height:40px;
color: #333;
box-sizing: border-box;/* 设置单元格边框为内边框不影响原有单元格的高度和宽度 */
background-color: #ffffff;
font-size: 0.875rem;
text-align: center;
word-break: keep-all;/* 单元格放不下时不换行 keep-all 不换行；break-all 换行； normal 浏览器默认换行规则*/
}
/*设置表格头部样式*/
th {
background: #FAFAFA;
color: #999;
}
/*固定表格首列*/
td:first-child, th:first-child {/*选择表格首列*/
position:sticky;/*粘性定位 当块元素超出区域时会自动贴紧初始位置 使用sticky属性时需要注意表格单元格边框消失问题*/
left:0;
outline: 1px solid #EBEBEB;/*设置轮廓，避免表格滑动表格时出现边框消失的情况；轮廓不占用空间，即不增加宽高*/
}
/*固定表格头部*/
thead tr th {
position:sticky;
top:0;
outline: 1px solid #EBEBEB;
}
/*设置最table左上边的单元格为块元素上层 这样单元格不会随着表格滑动而滑动*/
th:first-child {
z-index:2;
}
</style>
</head>
<body>
<div class="table-dajian">
<table>
<thead>
<!--表格头部-->
<tr>
<th>表格头部0</th>
<th>表格头部1</th>
<th>表格头部2</th>
<th>表格头部3</th>
<th>表格头部4</th>
<th>表格头部5</th>
</tr>
</thead>
<tbody>
<!--表格表格内容-->
<tr>
<td>左边栏0</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>左边栏1</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>左边栏2</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>左边栏3</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
<tfoot>
<!--表格尾部-->
<tr>
<th>表格尾部0</th>
<th>表格尾部1</th>
<th>表格尾部2</th>
<th>表格尾部3</th>
<th>表格尾部4</th>
<th>表格尾部5</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
这两种方法在电脑端和手机端都适用，大家多看代码注释，根据自己的需要进行调整，如果有问题可以留言提问交流。
版权声明©：希望对您会有所帮助；转载请注明出处。
相关文章
