Is there any way of denying .NET controls to style the final HTML element

Question

I have a control that look something like this:

<asp:DetailsView ID="dvUsers" runat="server" DataSourceID="odsData" 
                 DataKeyNames="Id">
...
</asp:DetailsView>

Which in the end will create a <table> as the outer-most element. In my CSS I have:

table tr {
border-top: 0 ;
border-left: 0 ;
border-right: 0 ;
border-bottom-width: 1px;
}

Now when I run the web-site the rendered <table> will have borders and styles which is due to the default settings for the control, which looks like this

<table cellspacing="0" rules="all" border="1" id="ctl00_body_dvUsers" 
       style="border-collapse:collapse;">

This will obviously override my CSS since it is inline and I do not want this. Is there any way of turning of all of the styling that is automatically done? I guess that I could recieve the same result as my CSS by setting a lot of attributes on the DetailsView, but I might have a lot of controls which in the end would render the final output as a table and I would have to configure all of these the same way.

This would result in a lot of duplicate code and a lot of work if some designer want to change the style of all the tables, since I would have to go back and change the styles for every control in my Theme file.

So: Is there a way of saying "Don´t mess with the styles, I know what I am doing!"

Answer 1

Take a look at the CSS Friendly Control Adapters project. It provides a drop-in solution to convert the DetailsView control (and others) from a table-based design a to div-based design that uses CSS classes instead of inline styles.

So, for example, it automagically turns this headache-inducing code:

<table cellspacing="2" CssSelectorClass="PrettyDetailsView" border="0" id="ctl00_ctl00_MainContent_LiveExample_DetailsView1" style="background-color:White;border-style:None;">
  <tr style="color:#F7F6F3;background-color:#5D7B9D;font-weight:bold;">
    <td colspan="2">Author Details</td>
  </tr><tr style="color:#333333;background-color:White;">
    <td style="font-weight:bold;">ID</td><td>998-72-3567</td>
  </tr><tr style="color:#333333;background-color:#F7F6F3;">
    <td style="font-weight:bold;">Last name</td><td>Ringer</td>
  </tr><tr align="center" style="color:Cyan;background-color:#284775;">
    <td colspan="2"><table border="0">
      <tr>
        <td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Page$2')" style="color:Cyan;">2</a></td>
      </tr>
    </table></td>
  </tr>
</table>

into peace and serenity:

<div class="PrettyDetailsView" id="ctl00_ctl00_MainContent_LiveExample_DetailsView1">
  <div class="AspNet-DetailsView">
      <div class="AspNet-DetailsView-Header">
        Author Details
      </div>
      <div class="AspNet-DetailsView-Data">
        <ul>
          <li>
            <span class="AspNet-DetailsView-Name">ID</span><span class="AspNet-DetailsView-Value">998-72-3567</span>
          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">Last name</span><span class="AspNet-DetailsView-Value">Ringer</span>
          </li>
        </ul>
      </div>
      <div class="AspNet-DetailsView-Pagination">
        <span class="AspNet-DetailsView-ActivePage">1</span><a class="AspNet-DetailsView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Page$2')">2</a>
      </div>
  </div>
</div>

I've been using it successfully for a while now, highly recommend it.

Answer 2

If you want more control of your html consider using a repeater control.