一、Table整体居中
如果想让整个Table居中,需要对Table标签进行样式设置。可以通过以下几种方式实现:
1、使用margin: 0 auto;进行居中:
<table style="margin: 0 auto;">
2、使用text-align:center进行居中:
<table style="text-align:center;">
3、使用table-layout:fixed进行居中:
<table style="table-layout: fixed; margin:auto; width:100%">
其中,table-layout: fixed的作用是让Table宽度自适应,而不是根据内容宽度设置。
二、Table中内容居中
如果想让Table中的内容都居中,可以分别对th、td标签进行样式设置,也可以对Table进行样式设置。
1、对Table进行样式设置:
<table style="text-align:center;"> <tr> <th>标题1</th> <th>标题2</th> </tr> <tr> <td>内容1</td> <td>内容2</td> </tr> </table>
这样所有的内容都会居中。
2、对th、td标签进行样式设置:
<table> <tr> <th style="text-align:center;">标题1</th> <th style="text-align:center;">标题2</th> </tr> <tr> <td style="text-align:center;">内容1</td> <td style="text-align:center;">内容2</td> </tr> </table>
这样只会让th、td标签中的内容居中,而不会对整个Table进行居中。
三、Table宽度自适应,但不超出父级容器宽度
如果想让Table宽度自适应,但不超出父级容器的宽度,可以使用max-width属性对Table进行设置。
<div style="width:80%; margin: 0 auto;"> <table style="max-width:100%;"> <tr> <th style="text-align:center;">标题1</th> <th style="text-align:center;">标题2</th> </tr> <tr> <td style="text-align:center;">内容1</td> <td style="text-align:center;">内容2</td> </tr> </table> </div>
这里我们使用一个父级div将Table包裹起来,并设置其宽度为80%,让Table居中。然后Table的max-width属性设置为100%,让其自适应,并且不会超出父级容器的宽度。
四、Table中某一行居中
如果想让某一行或某个单元格居中,可以使用text-align:center进行居中。
<table> <tr> <td>内容1</td> <td style="text-align:center;">内容2</td> <td>内容3</td> </tr> </table>
这里我们只对第二个单元格进行了居中处理。
五、Table垂直居中
如果想要Table垂直居中,可以使用vertical-align: middle对tr、td、th元素进行样式设置。
<table style="height:200px;"> <tr style="vertical-align: middle;"> <td>内容1</td> <td>内容2</td> </tr> </table>
这里我们对tr标签设置vertical-align:middle即可。
六、Table边框居中
如果想让Table的边框居中,可以使用border-collapse:collapse,同时对各个单元格的border进行设置。
<table style="border-collapse: collapse; border:2px solid black;"> <tr> <td style="border:2px solid black;">内容1</td> <td style="border:2px solid black;">内容2</td> </tr> </table>
这里我们使用border-collapse:collapse对Table进行设置,同时对单元格的border也进行设置。
七、Table响应式布局
如果想让Table在移动端也可以自适应,可以使用@media查询来进行响应式布局。
<table> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <style> @media screen and (max-width: 480px) { table, thead, tbody, th, td, tr { display: block; } th { text-align: center; height:80px; } td { height: 50px; border-bottom:1px solid #ddd; text-align:center; } } </style>
这里我们使用@media查询来对移动端进行响应式布局,将Table中的所有元素都设置为block,并使用text-align:center对th、td元素进行居中处理,同时设置其高度和border进行样式设置。
八、Table中添加背景色
如果想对Table进行背景色的添加,可以分别对th、td、tr标签进行样式设置,并基于各种实际需求设置样式。
<table> <tr style="background-color: #F8F8F8;"> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td style="background-color: #FFFFFF;">内容1</td> <td style="background-color: #FFFFFF;">内容2</td> <td style="background-color: #FFFFFF;">内容3</td> </tr> </table>
这里我们分别对tr、td标签进行背景色的设置,根据各种需求进行样式的设置即可。