1. 程式人生 > >tabel佈局中給tr加border邊框

tabel佈局中給tr加border邊框

今兒自己在做專案時,用到了table佈局。
但是設計給的是每行有底邊框。這個給難到自己了,後來自己搜尋解決了。

<table>
  <tr>
    <td>
      <p>獎池金額:</p>
    </td>
    <td>
      <p>25000*2=<span>50000</span></p>
    </td>
  </tr>
  <tr>
    <td>
      <p>中獎份數:</p>
</td> <td> <p>700</p> </td> </tr> <tr> <td> <p>每份獎金:</p> </td> <td> <p>50000 / 700 = 71.43</p> </td> </tr> </table>

當我們要給table中的tr設定樣式,要是單純的在css中這樣寫。

tr{
    border-bootom
:1px solid #e5e5e5
; }

這樣是不生效的!!!
這樣是不生效的!!!
這樣是不生效的!!!

想要樣式生效必須這麼寫。。。

table{
    border-collapse: collapse; 
}

table tr{
    border-bottom: 1px solid #e5e5e5;
}

必須給table設定border-collapse: collapse; 這個屬性,tr的屬性才會生效。。。