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

更改一些HTML

<table  cellspacing="0">
          <tr style="background: #70ad47; color:white;" >
            <th width="200">Compulsory Third party* (thisis the minimum insurance cover required in Kenya)</th>
            <th width="200">Third party with fire and Theft</th>
            <th width="200">Comprehensive Motor Insurance</th>
          </tr>
          <tr>
            <tbody>
              <tr style="background: #70ad47; color:white;" >
                <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 class = "second" >
                <td>3rdParty personal injuries</td>
                <td>Theft</td>
                <td>Malicious Damage</td>
              </tr>
              <tr style="background: #70ad47; color:white;" >
                <td></td>
                <td>Damage due to Fire</td>
                <td>Accidental Damage to your Vehicle</td>
              </tr>
            </tbody>
          </table>

添加此CSS

tr td, tr th{padding:10px 5px; vertical-align:top; border:1px solid #fff;}

tr th{border-bottom:5px solid #fff;}

https://jsfiddle.net/kj1wmmh1/3/

Answer 2

现在你改变你想要的......：）

＆＃13;

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

＆＃13;

Answer 3

试试这个

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

Answer 4

试试这个

.holder{
  width: 700px;
}
.holder div{
  display: inline-block;
}
.a{
  padding: 10px; vertical-align: top; width: 200px;
}
.b{
  padding: 10px; vertical-align: top; width: 150px;
}
.c{
  padding: 10px; vertical-align: top; width: 250px;
}
.d{
  padding: 10px; margin-top: -100px; vertical-align: top; width: 340px;
}

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

如何制作不同尺寸的桌子

4 个答案: