求css或html规范一个table的样式
现在我有一个table如下<tableheight=200width=200><tr><!--必需保持这个结构,大table有三个直行,每个直行有一个两行cell的tab...
现在我有一个 table 如下
<table height=200 width=200>
<tr><!-- 必需保持这个结构, 大 table 有三个直行, 每个直行有一个两行cell 的 table -->
<td>
<table><tr><td>x1,y1</td></tr> <tr><td>x1,y2</td></tr></table>
</td>
<td>
<table><tr><td>x2,y1</td></tr> <tr><td>x2,y2</td></tr></table>
</td>
<td>
<table><tr><td>x3,y1</td></tr> <tr><td>x3,y2</td></tr></table>
</td>
</table>
在生成动态页面後, 每个有 x?,y? 的 td 里都会写入不同长度的内容. 问题就是, 如果其中一个直行的 height 超过了 200, 那大 table 中的其他的两个直行将会变得半天吊( 不论 valign 是top bottom 还是中间 ), 我怎样能保持每个直行里的小 table 都能与大 table 的 td 上下对齐呢 ? (必要时 javascript 都接受了) 谢谢
补充一下, 这个就是我想要的效果... (border 最後会消掉) 展开
<table height=200 width=200>
<tr><!-- 必需保持这个结构, 大 table 有三个直行, 每个直行有一个两行cell 的 table -->
<td>
<table><tr><td>x1,y1</td></tr> <tr><td>x1,y2</td></tr></table>
</td>
<td>
<table><tr><td>x2,y1</td></tr> <tr><td>x2,y2</td></tr></table>
</td>
<td>
<table><tr><td>x3,y1</td></tr> <tr><td>x3,y2</td></tr></table>
</td>
</table>
在生成动态页面後, 每个有 x?,y? 的 td 里都会写入不同长度的内容. 问题就是, 如果其中一个直行的 height 超过了 200, 那大 table 中的其他的两个直行将会变得半天吊( 不论 valign 是top bottom 还是中间 ), 我怎样能保持每个直行里的小 table 都能与大 table 的 td 上下对齐呢 ? (必要时 javascript 都接受了) 谢谢
补充一下, 这个就是我想要的效果... (border 最後会消掉) 展开
4个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
table{
height: 200px;
}
table td{
width: 100px;
word-break:break-all;
}
</style>
</head>
<body>
<!-- 必需保持这个结构, 大 table 有三个直行, 每个直行有一个两行cell 的 table -->
<table border="1">
<tr>
<td>
<table border="1">
<tr>
<td>x1,y1</td>
</tr>
<tr>
<td>x1,y21,y21,y21,y21,y2</td>
</tr>
</table>
</td>
<td>
<table border="1">
<tr>
<td>x2,y1</td>
</tr>
<tr>
<td>x2,y2x2,y2x2,y2x2,y2x2,y2x2,y2x2,y2x2,y2x2,y2</td>
</tr>
</table>
</td>
<td>
<table border="1">
<tr>
<td>x3,y1</td>
</tr>
<tr>
<td>1,y21,y21,y21,y2</td>
</tr>
</table>
</td>
</table>
</body>
</html>
给采纳吧！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
第一行的 valign="bottom"，第二行的 valign="top"，严格保证3个小table内的td高度一致，这样才不会有上下或水平的错位感。最外层的table不要定义高度，或者高度一定要超过每个table的总高度。
代码如下：
<table width=200>
<tr><!-- 必需保持这个结构, 大 table 有三个直行, 每个直行有一个两行cell 的 table -->
<td>
<table><tr><td height="200" valign="bottom">x1,y1</td>
</tr> <tr><td valign="top">x1,y2</td>
</tr></table>
</td>
<td>
<table><tr><td height="200" valign="bottom">x2,y1</td>
</tr> <tr><td valign="top">x2,y2</td>
</tr></table>
</td>
<td>
<table><tr><td height="200" valign="bottom">x3,y1</td>
</tr> <tr><td valign="top">x3,y2</td>
</tr></table>
</td>
</table>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
table 里面嵌table？？ 呵呵... 千万别这样套。
你用window自带的画图工具把你想要的效果画出来吧。你这样描述别人都不想看？
你用window自带的画图工具把你想要的效果画出来吧。你这样描述别人都不想看？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没太明白你说的意思，但是你这个代码里面</table>前面少了一个</tr>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
