CSS table 单行布局示例代码

前端技术 2023/09/05 CSS

复制代码
代码如下:

<html>
<head>
<mce:style type=\"text/css\"><!--
table{border-collapse:collapse;}
td{border:1px blue solid;}
--></mce:style>
<style type=\"text/css\" mce_bogus=\"1\">
table{border-collapse:collapse;}
td{border:1px blue solid;}
</style>
</head>
<body>
<br/><br/><br/><br/>
<table width=\"50%\" align=\"center\">
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
</table>
</body>
</html>
<!-- table与tr背景色反色方式 -->
<html>
<head>
<mce:style type=\"text/css\"><!--
table{background:#0000FF;}
tr{background:#FFFFFF;}
--></mce:style><style type=\"text/css\" mce_bogus=\"1\">
table{background:#0000FF;}
tr{background:#FFFFFF;}
</style>
</head>
<body>
<br/><br/><br/><br/>
<table width=\"50%\" align=\"center\" cellspacing=\"0\">
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
</table>
</body>
</html>

本文地址：https://www.stayed.cn/item/14508

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案