html - Styling issue with Datalist formatted as Div Table -

i creating datalist formatted table using divs formatting. problem header of table not lining rest of table.

if remove headertemplate, lines properly. suggestions on how can fix this?

my datalist aspx

<asp:datalist id="table1" runat="server" repeatcolumns="1" cellspacing="1" repeatlayout="table">   <headertemplate>       <div class="table">       <div class="heading">           <div class="cell">              <p>heading 1</p>           </div>           <div class="cell">              <p>heading 2</p>           </div>           <div class="cell">              <p>heading 3</p>           </div>           <div class="cell">              <p>heading 4</p>           </div>          <div class="cell">              <p>heading 5</p>          </div>          <div class="cell">              <p>heading 6</p>          </div>          <div class="cell">              <p>heading 7</p>          </div>        </div> </headertemplate> <itemtemplate>                     <div class="row">          <div class="cell">              <p>row 1 column 1</p>          </div>          <div class="cell">              <p>row 1 column 2</p>          </div>          <div class="cell">              <p>row 1 column 3</p>          </div>          <div class="cell">              <p>row 1 column 4</p>          </div>          <div class="cell">              <p>row 1 column 5</p>          </div>          <div class="cell">              <p>row 1 column 6</p>          </div>          <div class="cell">               <p>row 1 column 7</p>          </div>       </div>    </div> </itemtemplate> </asp:datalist> 

my css

.table { display: table; } .heading { display: table-row; font-weight: bold; text-align: center; } .row { display: table-row; } .cell { display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; } 

screenshot of problem

note: appreciate alternative suggestions, using datalist formatted table using divs absolutely no tables in hard/unchangeable requirement out of hands.

i hope help, example, although best put main div , contains elements form table

.table {   display: table;   width:100% !important; } .heading {   display: table-row;   font-weight: bold;   text-align: center; } .row {   display: table;   width:100% !important; } .cell {   display: table-cell;   border: solid;   border-width: thin;   padding-left: 5px;   padding-right: 5px; }