html - 如何制作不同尺寸的 table

Question

我试图在 css 中制作下表，但没有白费。

下面是我的代码:

<table  cellspacing="0">
  <tr style="background: #70ad47; color:white;" >
    <th  width = "50" height = "60" >Compulsory Third party* (thisis the minimum insurance cover required in Kenya)</th>
    <th width="50%">Third party with fire and Theft</th>
    <th width="50%">Comprehensive Motor Insurance</th>
    <td></td>
  </tr>
  <tr>
    <tbody>
      <tr style="background: #70ad47; color:white;" >
        <td class = "first">3rdpartyproperty damage due to your motor vehicle’s involvement</td>
        <td width="50%">Includes all Compulsory Third party cover plus:</td>
        <td width="50%">Includes all Compulsory; Fire and Theft plus:-</td>
      </tr>
      <tr class = "second" >
        <td  width="50%" height = "98" >3rdParty personal injuries</td>
        <td  width="50%" height = "98" >Theft</td>
        <td  width="50%" height = "98" >Malicious Damage</td>
      </tr>
      <tr style="background: #70ad47; color:white;" >
        <td  width="50%" height = "98" ></td>
        <td  width="50%" height = "98" >Damage due to Fire</td>
        <td  width="50%" height = "98" >Accidental Damage to your Vehicle</td>
      </tr>
    </tbody>
</table>

我要制作的表格:

Answer 1

试试这个

table tr th{ border:1px solid #fff; border-bottom:5px solid #fff; padding:8px;}
table tr td{border:1px solid #fff; padding:8px;}
table{background: #70ad47; color:white;}
.list{display:list-item; list-style-position: inside;}

<table  cellspacing="0">
          <tr>
            <th>Compulsory Third party* (thisis the minimum insurance cover required in Kenya)</th>
            <th>Third party with fire and Theft</th>
            <th>Comprehensive Motor Insurance</th>
          </tr>
          <tr>
            <tbody>
              <tr >
                <td>3rdpartyproperty damage due to your motor vehicle’s involvement</td>
                <td>Includes all Compulsory Third party cover plus:</td>
                <td>Includes all Compulsory; Fire and Theft plus:-</td>
              </tr>
              <tr style="background: #70ad47; color:white;" >
                <td>3rdParty personal injuries</td>
                <td><div class="list">Theft</div></td>
                <td><div class="list">Malicious Damage</div></td>
              </tr>
              <tr >
                <td></td>
                <td><div class="list">Damage due to Fire</div></td>
                <td><div class="list">Accidental Damage to your Vehicle</div></td>
              </tr>
            </tbody>
          </table>