HTML自适应表格制作_随笔

Dreamweaver的“表格式数据导入（T）”功能

依据：Dw的“表格式数据导入（T）”功能可以将存有表格数据的UTF-8编码的TXT文档导入到软件当中

制作UTF-8编码的TXT文档

我们将表格数据直接拷贝到新建的TXT面板中，文件>另存为...,在“另存为”菜单面板右下角的“编码（E）”选择“UTF-8”，保存

Dw的“表格式数据导入（T）”功能

在Dw中点击菜单文件>导入>表格式数据导入（T），选择TXT文件，导入

这时候表格的基本数据已经导入到DW中了，剩下的工作我们就可以编辑表格的基本样式

三、表格的自适应和单元格数据居中

以一个6X4的表格为例

<!DOCTYPE html>

<html>

<head>

<title>自适应宽度的table</title>

table{

table-layout: fixed

border-collapse: collapse

width: 100%

}

</style>

</head>

<body>

<tr>

<th>Header</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

设置自适应宽度一般都是需要把他们的width设置为百分比，你可以测试一下，或者发你的网址来我给你测试一下；

但是这样设置只能让表格来自适应还需要考虑到表格内容来自适应，举个例子来说吧：如下

用@media screen来根据浏览器的宽度判断

@media screen and (max-width:360px){body,input,select{font-size:12px}}

意思是：当浏览器的宽度小于360px时，文字大小12像素

反过来讲一样：@media screen and (min-width:360px){body,input,select{font-size:15.75px}}

当浏览器的宽度大于360px的时候就是15.75px文字大小，这样的话，表格里面的内容就可以完整的显示；

具体的代码还需要你自己来写；

欢迎分享，转载请注明来源：内存溢出

HTML自适应表格制作