Question

我需要在表格中添加填充，并为每行添加底部边框。为此，我创建了一个类并使用带有tr标记的类。

这是我的代码。

<html>
<head>
<style>
#topLevel{
    background:powderblue;
    padding:30;
}
#container{
    background: white;
}

.row{
    background:white;
    padding: 10;
    border-bottom: 1pt solid black;

    font-family: calibri;
    font-size: 12px;
    color : #979799;
    }

th {
    text-align: left;
}  
 </style>
 </head>
 <body>
<div id="topLevel">
    <div id ="container">
    <table style="width:100%">
    <tr class = "row"> <th>CLAIM NO</th> <th>POLICY NO</th> <th>CLAIMANT NAME</th> <th>DATE OF INCIDENT </th> <th>REPORTED DATE</th> <th>CITY</th> <th>MOBILE NO</th> <th>ACTIONS</th>
    </tr>
    <tr class = "row"> <td>CLAIM NO</td> <td>POLICY NO</td> <td>CLAIMANT NAME</td> <td>DATE OF INCIDENT </td> <td>REPORTED DATE</td> <td>CITY</td> <td>MOBILE NO</td> <td>ACTIONS</td></tr>
    </table>
    </div>
</div>
</body>

 </html>

请帮忙

Answer 1

由于这是一个表格，您需要提供表格边框间距：

table { 
  border-spacing:10px 10px;
}

或

为表头和表格行填充：

tr.row th, tr.row td { padding: 10px; }

Answer 2

你必须在td元素上进行填充

    .row td {
        padding-top:10px;
        padding-bottom:10px;
    }

    .row td:first-child {
        padding-left:10px;
    }
    .row td:last-child {
        padding-right:10px;
    }

Answer 3

您需要显示为块，否则，它将不接受填充。

#topLevel{
    background:powderblue;
    padding:30px;
}
#container{
    background: white;
}

.row{
    background:white;
    padding: 10px;
    border-bottom: 1px solid black;
    display:block;
    font-family: calibri;
    font-size: 12px;
    color : #979799;
    }

th {
    text-align: left;
}

<html>
<head>
<title></title>
 </head>
 <body>
<div id="topLevel">
    <div id ="container">
    <table style="width:100%">
    <tr class = "row"> <th>CLAIM NO</th> <th>POLICY NO</th> <th>CLAIMANT NAME</th> <th>DATE OF INCIDENT </th> <th>REPORTED DATE</th> <th>CITY</th> <th>MOBILE NO</th> <th>ACTIONS</th>
    </tr>
    <tr class = "row"> <td>CLAIM NO</td> <td>POLICY NO</td> <td>CLAIMANT NAME</td> <td>DATE OF INCIDENT </td> <td>REPORTED DATE</td> <td>CITY</td> <td>MOBILE NO</td> <td>ACTIONS</td></tr>
    </table>
    </div>
</div>
</body>

 </html>

填充和边框不能与tr标签一起使用

3 个答案: