話不多說，直入主題

目標效果

• 無序列表法

首先一種比較歪的方法，利用 ul 和 li 構建。
其中最大的問題就是如果每個 li 標簽設置 border，
兩個 border 黏在一起就會出現加粗的效果。

                                     // CSS重點
<div class="box">
      <p>XXXX項目報價</p>
      <div class="table">            // 父元素設置font-size: 0;
            <ul>                     // 取消內部inline-block子元素間距
                  <li>公司</li>      // ul 設置左、上的邊框，
            </ul>                    // li 設置右、底的邊框，
            .........                // 并且 li 變成inline-block，變成行內元素。
            <ul>                     // 這樣湊起來就是一個表格。
                  <li>fsd</li>
            </ul>
      </div>
</div>

• 正經使用 <table>（表格）標簽

首先應該知道這些東西:

結構如此，和無序列表的方法優點相似。

<div class="box">
    <table>
        <caption>xxxx成績單</caption>
        <tr>
            <th>姓名</th>
        </tr>
       ............
        <tr>
            <td>xxx</td>
        </tr>
    </table>
</div>

以下是給 table 添加了不同 attr 之后的效果

屬性效果

以上右下角就比較接近我們想要的效果，但是！

• 這個邊框感覺非常奇怪吖
• 寫內聯屬性似乎不太好啊

那么，下面將這些屬性轉化成 CSS 的形式

首先是 border ，這個簡單，
將表格的格子標簽添加上想要的邊框效果。如:
border: 1px solid #000
就會得到黑色一像素的邊框，
但是，這時看到的格子是分開的！像這樣

大家都很生疏嘛

注意！這個屬性只能設置在 table 標簽上， 就像那些 attr 一樣，

所以無序列表法不能用這個屬性解決相同事情。
這樣事情就辦妥拉。

為了節省篇幅，以上只提到一些關鍵屬性，

想要得到效果，還是需要設置其它的一些屬性的。

Wait me back