2017-10-04 29 views
0

我需要填充表格中的填充和每行的底部邊框。 爲此,我創建了一個類並使用帶有tr標籤的類。填充和邊框不與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> 

請幫

+1

** ** 10px的不** 10 ** - 您還需要指定單位 –

+0

邊框寬度屬性必須位於「px」中。你不能使用「pt」。 「pt」只是指字體。 – sn3ll

+0

甚至不能使用10px –

回答

1

由於這是一個表,你會想給表格邊框間距:

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

OR

給表頭和錶行填充:

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

您需要顯示爲塊,否則不會接受填充。

#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>

0

你必須做填充的TD元素上

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

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