1. Development environment Vue + Vant 2. Computer system Windows10 Professional 3 In the process of development, we often use the table component, but we will find that there is no table component in Vant, at this time we can choose to write a table or use a plug-in, in this case I choose a handwritten table, now I will share how to add borders to the table, I hope it is helpful for you. 4. Add the following code to the template:

<table class=" RuleTable "> <th>Order Time</th> <th>Data</th> <th>User</th> <tr> <td>18-12-2020 10:20:34.311</td> < TD >102034311</ TD > </ TD > </ TR > < TD >102034311</ TD > < TD >102034311</ TD > </ TD > < / tr > < tr > < td > 18-12-2020 10:20:34. 311 < / td > < td > 102034311 < / td > < td > Any Mille < / td > < / tr > < / table >

5. Add the following code to your CSS:

.ruletable{ width: 100%; border-collapse: collapse; // Main code}.RuleTable th{text-align: center; } .ruletable tr:nth-of-type(1){ border-top: 1px solid #FFDCDF; Border-bottom: 1px solid #FFDCDF; border-bottom: 1px solid #FFDCDF; // Add border}

6. The effect picture is as follows:



7. This period of sharing here is over, is not very nice, I hope to help you, let us work together to the peak.