html中自适应表格的问题 5
2个回答
展开全部
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，放删除按钮。
第一个和第三个宽度可以设置小一点，让内容自己去展开。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码如下，已经测试通过，高宽度目前均设置100px，可自行修改：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>table表格边框制作</title>
<style type="text/css">
<!--
table {
font-size: 12px;
text-align: center;
width: 500px;
height: 60px;
}
.table_half {
border-top: 1px solid green;
border-right: 1px solid green;
}
.table_half td {
width: 100px;
height: 100px;
border-bottom: 1px solid green;
border-left: 1px solid green;
}
-->
</style>
</head>
<body>
<!-- CSS代码写在页面头部，通过引用名称来实现，方便修改 -->
<table border="0" cellpadding="0" cellspacing="0" class="table_half">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
追问
我想要自适应屏幕宽度的表格，并且表格总高度与宽度相等。
追答
去掉头部声明，html只保留table代码，可以自适应整个页面，但不能全部为正方形，因为页面宽度总大于页面高度，你要正方形，那么宽度就不能自适应了，代码如下，已经过测试：
<table width="100%" height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="33.3%"> </td>
<td width="33.3%"> </td>
<td width="33.3%"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
