Search code examples
htmlasp.nethtml-tablerepeater

html table <td> width in repeater itemtemplate unable to set


I'm trying to adjust the width of the columns in the HTML table which act as the holder of ASP repeater items.

<asp:Repeater id="viewproduct" runat="server"> 
 <HeaderTemplate>
  <table id="grid">
    <thead >
       <tr>
         <th width="20px" data-field="check"></th>
         <th data-field="level">Status</th>
         <th data-field="Class">Username</th>
       </tr>
    </thead>
    <tbody>``
  </HeaderTemplate>
  <ItemTemplate>
      <tr>
      <td width="20px"><asp:CheckBox ID="CheckApprove" runat="server" Width="20px" /></td>                   
      <td><asp:Label ID="status" runat="server"
            Text='<%#DataBinder.Eval(Container.DataItem, "Status")%>'></asp:Label></td> 
      <td><asp:Label ID="name" runat="server"
            Text='<%#DataBinder.Eval(Container.DataItem, "name")%>'></asp:Label></td>
      </tr>
    </ItemTemplate>
  <FooterTemplate>
    </tbody>
    </table>
  </FooterTemplate>
</asp:Repeater>

Notice that the header follows the width, but the content does not. WHY? Here's how my table looks like currently:


Solution

  • Use style tag in th and td
    <asp:Repeater id="viewproduct" runat="server"> 
     <HeaderTemplate>
      <table id="grid">
        <thead >
           <tr>
             <th style="width:20px;" data-field="check"></th>
             <th data-field="level">Status</th>
             <th data-field="Class">Username</th>
           </tr>
        </thead>
        <tbody>``
      </HeaderTemplate>
      <ItemTemplate>
          <tr>
          <td style="width:20px;" ><asp:CheckBox ID="CheckApprove" runat="server" Width="20px" /></td>                   
          <td><asp:Label ID="status" runat="server"
                Text='<%#DataBinder.Eval(Container.DataItem, "Status")%>'></asp:Label></td> 
          <td><asp:Label ID="name" runat="server"
                Text='<%#DataBinder.Eval(Container.DataItem, "name")%>'></asp:Label></td>
          </tr>
        </ItemTemplate>
      <FooterTemplate>
        </tbody>
        </table>
      </FooterTemplate>
    </asp:Repeater>