如何设置HTML页面自适应宽度的table
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何设置HTML页面自适应宽度的table相关的知识，希望对你有一定的参考价值。
参考技术A 用jquery获取浏览器实时的宽度,然后设置table宽度<body onload="resize();" onresize="resize();">
<table>
<thead>
<th>col1</th>
<th>col2</th>
</thead>
<tbody>
<tr>
<td>我是帅哥</td>
<td>楼上说的很对</td>
</tr>
</tbody>
</table>
<script src="js/JQuery.min.js"></script> //别忘了引入JQeury的js文件
<script>
function resize()
var width = $(document).width() ; //获取浏览器宽度
$("table").width(width) ; //设置table宽度
</script>
</body> 参考技术B table的很简单啊
<table width="100%"> 参考技术C
table中添加样式 style="width:100%;"，有用请采纳；//用样式比较规范；
<table style="width:100%;background-color:#00f;border:1px solid #f00;">
<tr>
<td>如何设置html页面自适应宽度的table</td>
</tr>
</table>
<table style="width:100%;background-color:#00f;border:1px solid #f00;"><tr>
<td>如何设置HTML页面自适应宽度的table</td>
</tr>
</table>本回答被提问者采纳
如何设置HTML页面自适应宽度的table(表格)（一）
参考技术A 将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在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不再被内容撑出适合的高度。
例：
效果图
以上是关于如何设置HTML页面自适应宽度的table的主要内容，如果未能解决你的问题，请参考以下文章