css:

　　　　　　　　.test1 {
                empty-cells: show;/*show：指定當表格的單元格無內容時，顯示該單元格的邊框。*/
                border-spacing: 10px 10px;/*用長度值來定義行和單元格的邊框在橫向和縱向上的間距。不允許負值*/
                border-collapse: separate;/*separate：邊框獨立;collapse：相鄰邊被合並*/
                table-layout: fixed;/*fixed：固定布局的算法。在這算法中，水平布局是僅僅基於表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內容無關。也就是說，內容可能被裁切
 
*/
                width: 100%;
            }
            
            .test2 {
                empty-cells: hide;/*hide：指定當表格的單元格無內容時，隱藏該單元格的邊框。*/
                border-spacing: 10px 10px;
                border-collapse: separate;
                table-layout: fixed;
                width: 100%;
            }
            
            td 
 
{
                background-color: aliceblue;
                text-align: center;
                border: 1px solid #3198F7;
                border-radius: 5px;
                height: 50px;
            }

html:

　　　　  <h1>show:</h1>
        <table class="test1">
            <tbody
 
>
                <tr>
                    <td>序號</td>
                    <td>姓名</td>
                    <td>年齡</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Joy</td>
                    <td>26</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kate</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

        <h1>hide:</h1>
        <table class="test2">
            <tbody>
                <tr>
                    <td>序號</td>
                    <td>姓名</td>
                    <td>年齡</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Joy</td>
                    <td>26</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kate</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

效果:

用table繪制 等寬等間距的單元