表格布局中设置行高

先看效果图：在线体验
其中输入框、按钮的样式在这篇文章里

table

1. 让表格的第一列文字向右对齐

假设可以找到 table 标签下面的所有 td 标签：

 table > tbody > tr > td:first-child {
    text-align: right;
}

2. 调节行高

2.1. 首先看一下行内元素与块级元素的区别：

• 行内元素会再一条直线上，是在同一行的
• 块级元素各占一行，是垂直方向的
• 行内元素不可以控制宽和高

2.2. 常见的行内元素和块级元素：

块级元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
行内元素：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

2.3. 不可以给 tr 设置 margin、padding，但可以给 td 设置 padding

原因：

table 中 tr 默认 display: table-row ; ， 虽可修改为 display: block; ，但会失去 tr 特有的显示效果，如 td 自动对齐。

解决办法有三种 ：

• 可以通过给 td 设置 padding 修改行高；
• 设置 line-height: 30px; 为你想要的高度；
• 给 table 设置

table {
    border-spacing :  10px 10px ;
    }
    ```
    
### 3. 去掉表格的背景和边框等不需要的样式，并增加单元格间隙

要增加单元格间隙，可以这样做：

table {
border-collapse: separate; /其实不写这句可以，因为 border-collapse 默认为 separate/
border-spacing : 10px 10px ;
}
```