用css将table翻转

最新推荐文章于 2024-06-29 15:01:06 发布

落风月

最新推荐文章于 2024-06-29 15:01:06 发布

阅读量4.7k

点赞数 2

文章标签： html CSS

本文链接：https://blog.csdn.net/u012844301/article/details/52229319

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先直接上代码。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>table test</title>
</head>
<body>

<table id="table-demo">

<tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
</tr>

<tr>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
</tr>

<tr>
    <td>李四</td>
    <td>男</td>
    <td>20</td>
</tr>

</table>



<style type="text/css">
*{
}

html,body{
    height: 100%;
    width: 100%;
} 

#table-demo{
    text-align: center;
}

#table-demo tr{
    display: inline-block;
}

#table-demo th,td{
    display: block;
    border: 1px solid;
}

</style>

</body>
</html>

基本原理：将 td 标签设置为 block ，因为要竖向排列，block之后，每个数据会自动的自成一行，

但是仅仅每个数据自成一行是不行的，因为块级元素会自动的自成一行的话，将会导致每个td都自成一行，所以我们还需要将tr设置为inline-block。

用tr将td包裹，同时允许每个tr能在一行内排列。