html中自适应表格的问题 *** 作方法：
1、实例代码如
<body style="scroll:no"><table width="100%" height="100%">
<tr>
<td height="10px" id="conditions"></td>
</tr>
<tr>
<td id="Content"></td>
</tr>
<tr>
<td height="10px" id="btns">
<input type="button" id="btnDel" value="删除" />
</td>
</tr>
</table>
</body>
2、实例代码如图：
3、代码各个用处分析：
这个表格分为3块
第一个id为conditions，放查询条件。
第二个id为Content，放显示内容。
第三个id为btnDel，放删除按钮。
第一个和第三个宽度可以设置小一点，让内容自己去展开。
一、使用textarea标签进行多行文本的输入有很多限制，比如不能实现高度自适应，会出现难看的滚动条等问题。HTML5中添加了一个新属性contenteditable，该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能；
用法如下：
//contenteditable="true"当属性值为true的时候，可编辑标签内可以写入标签，对于复制的具有样式的内容，其样式会保留；
<div contenteditable="true">我是可编辑的富文本框</div>
//contenteditable="plaintext-only"当属性值为plaintext-only时，该可编辑标签内只能写入纯文本的数据，对于复制的具有样式的内容，会转换为纯文本，而将样式标签等内容过滤掉；
<div contenteditable="plaintext-only"></div>
二、如果不使用该属性，可以使用js控制textarea的高度；原理是当textarea出现滚动条时，增加其高度，使滚动条消失。
怎样判断是否出现滚动条，其方法是但元素的scrollHeight大于offsetHeight的时候，即出现了滚动条；
实现方法如下：
//html
<textarea id="text"></textarea>
//css
#text{
font-size: 20px
overflow: hidden//必须
}
//js
$('#text').on('input',function(){
if(text.scrollHeight>text.offsetHeight){
THeight += 20//font-size的大小是20，因此每次给textarea的高度增加20px
$('#text').css('height',THeight)
}
})
Dreamweaver的“表格式数据导入（T）”功能依据：Dw的“表格式数据导入（T）”功能可以将存有表格数据的UTF-8编码的TXT文档导入到软件当中
制作UTF-8编码的TXT文档
我们将表格数据直接拷贝到新建的TXT面板中，文件>另存为...,在“另存为”菜单面板右下角的“编码（E）”选择“UTF-8”，保存
Dw的“表格式数据导入（T）”功能
在Dw中点击菜单 文件>导入>表格式数据导入（T），选择TXT文件，导入
这时候表格的基本数据已经导入到DW中了，剩下的工作我们就可以编辑表格的基本样式
三、表格的自适应和单元格数据居中
以一个6X4的表格为例
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）