先看效果圖：在線體驗
其中輸入框、按鈕的樣式在這篇文章里

table

1. 讓表格的第一列文字向右對齊

假設可以找到 table 標簽下面的所有 td 標簽：

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

2. 調節(jié)行高

2.1. 首先看一下行內元素與塊級元素的區(qū)別：

• 行內元素會再一條直線上，是在同一行的
• 塊級元素各占一行，是垂直方向的
• 行內元素不可以控制寬和高

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 ;
}
```