Css中控制table单元格的间距
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Css中控制table单元格的间距相关的知识，希望对你有一定的参考价值。
1、设置表格的边框。在CSS中，可以通过border来设置表格或单元格的边框及其边框颜色，例如，下面设置表格为1px的蓝色边框。
2、在table表格里，默认是显示两个边框线的，如果要设置成一条边框，在CSS中需要使用border-collapse设置为collapse，合并为一条边框。
3、CSS设置表格的宽度和高度，使用width宽度和height高度来设置。
4、CSS设置表格的文本水平对齐方式。主要通过text-align来设置，有三个值：居左对齐left，居右对齐right，居中对齐center。
5、CSS设置表格的内边距。主要通过padding来设置，padding值越大，内边距越大，如图设置间距为15像素。
6、如图所示间距设置成功。
border-collapse:collapse;那么，cellspacing、cellpadding此时无效。可以用padding来替代。 参考技术B 去掉thead，tbody标签，直接写table，tr,th,td就不会有单元格之间的间距，如果非要thead，tbody标签那么就引入bootstrap可以也解决 参考技术C border-collapse:collapse;
单元格之间无距离 参考技术D 可以用padding和marign设置
tdpadding:你要设置的值;marign:你要设置的值;
table表单中的属性
表格属性
<table>标签里需要设置的属性
border：表格的边框。比如，border=1，表示表格边框的粗细为1个像素，
为0表示没有边框。
cellspacing：单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing，
表格只有一个单元格，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。
cellpadding：单元格衬距。指该单元格里的内容与cellspacing区域的距离，
cellspacing为0，表示单元格里的内容与表格周边边框的距离。
width：表格的宽度。width的取值还可以使用百分比，如widht="100%"。
height：表格的高度，取值方法同width。
bgcolor：表格的背景色。bgcolor=#ff0000或bgcolor=red。
<td>单元格也可有此属性。
background：表格的背景图。<td>也有此属性。
bordercolor：表格的边框颜色，当border值不为0时此值有效。取值同bgcolor。
bordercolorlight：亮边框颜色，当border值不为0时设置此值有效。
亮边框指表格的左边和上边的边框。
bordercolordark：暗边框颜色，当border值不为0时设置有效。
暗边框指表格的右边和下边的边框。
align：表格的对齐方式，值有left（左对齐）、center（居中）以及right（右对齐）。
列1 表格式样和代码
本表格的属性设置：
边框大小：border=1
边框颜色：bordercolor=#808000
背景色：bgcolor=#cc9968
表格宽度：width=300
单元格间距：cellspcing=8
单元格衬距：cellpadding=4
表格的对齐方式（居中）：align=center
注：其他属性未设置。
代码
<TABLE borderColor=#808000 cellSpacing=8 cellPadding=4 width=300 align=center bgColor=#cc9968 border=1>
<TBODY>
<TR>
<TD>
<P>本表格的属性设置：</P>
<P>边框大小：border=1 </P>
<P>边框颜色：bordercolor=#808000 </P>
<P>背景色：bgcolor=#cc9968 </P>
<P>表格宽度：width=300 </P>
<P>单元格间距：cellspcing=8 </P>
<P>单元格衬距：cellpadding=4 </P>
<P>表格的对齐方式（居中）：align=center </P>
<P>注：其他属性未设置。 </P></TD></TR></TBODY></TABLE>
eg.
| <html> | |
| <head> | |
| <style> | |
| table | |
| { | |
| width:740ox; | |
| height:211px; | |
| border:solid 1px #d9e4f2; | |
| margin-left:auto; | |
| margin-right:auto | |
| } | |
| td | |
| { | |
| font-family:宋体; | |
| font-size:14px; | |
| width:293px; | |
| height:34px; | |
| text-align:left; | |
| padding-left:10px; | |
| } | |
| th | |
| { | |
| font-family:宋体; | |
| font-size:14px; | |
| font-weight:normal; | |
| width:110px; | |
| height:34px; | |
| text-align:left; | |
| padding-left:10px; | |
| border:solid 1px #d9e4f2; | |
| background-image:url(images/bg2.png); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse"> | |
| <tr> | |
| <th>职位分类</th> | |
| <td colspan="3">前端开发工程师</td> | |
| </tr> | |
| <tr> | |
| <th>职位分类</th> | |
| <td>上海黄浦</td> | |
| <th>工作性质</th> | |
| <td>全职</td> | |
| </tr> | |
| <tr> | |
| <th>工作地点</th> | |
| <td>3000-5000（元、月）</td> | |
| <th>福利待遇</th> | |
| <td>无/面谈</td> | |
| </tr> | |
| <tr> | |
| <th>工作经验</th> | |
| <td>一年以上</td> | |
| <th>年龄要求(岁)</th> | |
| <td>20-30</td> | |
| </tr> | |
| <tr> | |
| <th>学历要求</th> | |
| <td>大专(含以上)</td> | |
| <th>性别要求</th> | |
| <td>不限</td> | |
| </tr> | |
| <tr> | |
| <th>招聘人数</th> | |
| <td>5人</td> | |
| <th>隶属部门</th> | |
| <td>总部 研发部</td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
以上是关于Css中控制table单元格的间距的主要内容，如果未能解决你的问题，请参考以下文章