求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 最後会消掉)
展开
 我来答
程序员养大闸蟹
2017-11-02 · 自家的蟹塘,苏州阳澄湖蓝标大闸蟹养殖户
程序员养大闸蟹
采纳数:2362 获赞数:20622

向TA提问 私信TA
展开全部

<!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>

给采纳吧!

Apple
2013-09-22 · 知道合伙人数码行家
Apple
知道合伙人数码行家
采纳数:13946 获赞数:38144
南京艺术学院,平面网页UI设计17年,Adobe网页设计师

向TA提问 私信TA
展开全部

第一行的 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>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友84c11da
2013-09-22 · TA获得超过1108个赞
知道小有建树答主
回答量:695
采纳率:100%
帮助的人:402万
展开全部
table 里面嵌table?? 呵呵... 千万别这样套。

你用window自带的画图工具把你想要的效果画出来吧。你这样描述别人都不想看?
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
訫儿_1314
2013-09-22 · TA获得超过738个赞
知道小有建树答主
回答量:299
采纳率:0%
帮助的人:413万
展开全部
没太明白你说的意思,但是你这个代码里面</table>前面少了一个</tr>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式