GridView با ظاهر اختصاصی

دوستان چطور می تونم ظاهر گرید ویوم رو تغییر بدم به شکل زیر:
(قالب html که از قبل ساختم)

Untitled.jpg

[PHP]
<div class="box border pink"> <div class="box-title"> <h4><i class="fa fa-bars"></i>لیست تراکنش های دریافتی</h4> </div> <div class="box-body"> <table class="table table-hover"> <thead> <tr> <th>ردیف</th> <th>شماره تراکنش</th> <th style="padding-right:30px;">مبلغ</th> <th style="padding-right:70px;">زمان واریز</th> <th>نوع تراکنش</th> <th>وضعیت</th> <th>جزئیات</th>
</tr> </thead> <tbody> <tr> <td>1</td> <td>5362362</td> <td>10000 ریال</td> <td>پنجشنبه ۰۱ بهمن ۱۳۹۴ , ۲۲:۰۹:۵۸</td> <td>سود شارژ</td> <td><span class="label label-success center">موفق</span></td> <th><a href="#">مشاهده</a></th> </tr> <td>2</td> <td>5362262</td> <td>30000 ریال</td> <td>پنجشنبه ۰۱ بهمن ۱۳۹۴ , ۲۲:۰۹:۵۸</td> <td>فروش فایل</td> <td><span class="label label-danger center">نا موفق</span></td> <th><a href="#">مشاهده</a></th> </tr> <td>3</td> <td>6362362</td> <td>85000 ریال</td> <td>شنبه ۰۱ بهمن ۱۳۹۴ , ۲۲:۰۹:۵۸</td> <td>درگاه مستقیم</td> <td><span class="label label-success">موفق</span></td> <th><a href="#">مشاهده</a></th> </tr> <tr> <td>4</td> <td>5362362</td> <td>10000 ریال</td> <td>پنجشنبه ۰۱ بهمن ۱۳۹۴ , ۲۲:۰۹:۵۸</td> <td>سود شارژ</td> <td><span class="label label-success">موفق</span></td> <th><a href="#">مشاهده</a></th> </tr> <td>5</td> <td>5362262</td> <td>30000 ریال</td> <td>پنجشنبه ۰۱ بهمن ۱۳۹۴ , ۲۲:۰۹:۵۸</td> <td>فروش فایل</td> <td><span class="label label-danger">نا موفق</span></td> <th><a href="#">مشاهده</a></th> </tr> <td>6</td> <td>6362362</td> <td>85000 ریال</td> <td>شنبه ۰۱ بهمن ۱۳۹۴ , ۲۲:۰۹:۵۸</td> <td>درگاه مستقیم</td> <td><span class="label label-success">موفق</span></td> <th><a href="#">مشاهده</a></th> </tr> </tbody> </table> </div> </div>
[PHP/]

- - , .