title: Table in GridView is using CSS from DetailsView control
body: <p>I am having architectural trouble setting up styles for gridviews and detailsviews.</p>
  
  <p>Our Intranet server is basically a multiple application website. Most reports, and tools are using grid structure, but because they may perform wildly different functions the formatting varies slightly from grid to grid and detail to detail.  I tried to make a dedicated style for each, but I am running into inheritance issues.<br>
  For example: I wanted an extra title bar for some Gridviews. 
  the Gridview is set up like this:</p>
  
  <pre><code>&lt;asp:GridView
              ID="GridView_Links"
              runat="server"
              DataSourceID="SqlDataSource1"
              AutoGenerateColumns="False"
              DataKeyNames="link_key"
              AllowSorting="True"
              CssClass="GridView"
              GridLines="Vertical"
              EnableModelValidation="True"
              Caption='&lt;table CssClass="GVcaption" &gt;&lt;tr&gt;&lt;td&gt;Link Manager&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'
              CaptionAlign="Top"
              OnRowCommand="GridView_Links_RowCommand"&gt;
              &lt;FooterStyle CssClass="GridView-Footer" /&gt;
              &lt;HeaderStyle CssClass="GridView-Header" /&gt;
              &lt;AlternatingRowStyle CssClass="GridView-AlternateRow" /&gt;
              &lt;RowStyle CssClass="GridView-Row" /&gt;
              &lt;SelectedRowStyle CssClass="GridView-SelectedRow" /&gt;               
          &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>The Details view is referenced the same way for css.
  What happens is  the Caption table doesn't get GVcaption applied to it and instead has .DetailsView-CommandRow a, tr:nth-child(1) applied to it.</p>
  
  <p>Here is the css for  it. </p>
  
  <pre><code>/*Gridview*/
  
  .GridView {
      border-bottom: solid 3px #335e77;
      border-left: solid 3px #335e77;
      border-right: solid 3px #335e77;
      border-top: solid 1px white;
      background-color: transparent;
      text-align: center;
      -moz-box-shadow: 5px 5px 1px #5A6266;
      -webkit-box-shadow: 5px 5px 1px #5A6266;
      box-shadow: 5px 10px 10px #5A6266;
  }
  .GVcaption table {
      text-align: center;
      padding: 5px 10px 5px 10px;
      border-collapse: collapse;
      border-bottom-color: white;
      border-right-color: #335e77;
      border-bottom: solid 3px #335e77;
      border-left: solid 3px #335e77;
      width: 100%;
  }
  .GridView table {
      align-content:center;
      text-align:center;
      padding: 5px 10px 5px 10px;
      border: solid 1px white;
      border-collapse: collapse;
      border-bottom-color: white;
      border-right-color:#335e77;
      width:100%;
  }
  
  .GridView-Header a, th {
      font-weight: bold;
      font-size: medium;
      color: white;
      text-align: center;
      align-content: center;
      align-items: center;
      padding: 3px;
      border-top-color: white;
  }
  
  .GridView-Header  tr:nth-column(0) {
      text-align: center;
      font-weight: bold;
      font-size: large;
      color: white;
      text-decoration: underline;
  }
  GridView-Header td   { 
      background-color: #335E77;
      font-weight: bold;
      font-size: larger;
      color: white;
      text-align: center;
      border-color: white;}
  
  .GridView-Row tr td {
      background-color: #EEEEEE;
      color: black;
      padding-left: 30px;
      width: auto;
      border-right: solid 1px white;
  
  }
  .GridView body {
      font-family: sans-serif;
      color: #666;
      font-size: 12px;
      line-height: 12px;
      background-color: white;
          padding: 3px;
  }
  
  .GridView-SelectedRow tr {
      background-color: #00ff90;
      font-weight: bold;
      color: white;
      align-content: center;
  
  }
  
  .GridView-AlternatingRow tr {
      background-color: #DCDCDC;
  }
  
  .GridView-Footer tr {
      background-color: #335E77;
      color: black;
      align-content: center;
  }
  
  .GridView-Pager {
      background-color: #335E77;
      font-weight: bold;
      border: solid;
      color: black;
      align-content: center;
  }
  
  /*DetailsView*/
  
  .DetailsView {
      padding: 3px;
      border: solid #335e77;
      background-color: transparent;
      text-align: left;
      -moz-box-shadow: 5px 5px 1px #5A6266;
      -webkit-box-shadow: 5px 5px 1px #5A6266;
      box-shadow: 5px 10px 10px #5A6266;
  }
  
  .DetailsView-Header td, td:nth-child(0) {
      background-color: #335E77;
      font-weight: bold;
      font-size: larger;
      color: white;
      text-align: center;
      border-color: white;
  }
  
  .DetailsView-Footer td, td:nth-child(0) {
      background-color: #335E77;
      font-weight: bold;
      font-size: larger;
      color: white;
      text-align: center;
  }
  
  .DetailsView tbody {
      padding: 3px;
      background-color: whitesmoke;
      text-align: left;      
  
  }
  
  .DetailsView-CommandRow a, tr:nth-child(1) {
      background: #335E77;
      font-weight: bold;
      border: solid 1px black;
      color: white;
      text-align: left;    
  }
  
  /*.DetailsView-Row tr {
      background-color: #DCDCDC;
      font-weight: bold;
      font-size: larger;
      color: pink;
      text-align: left;   
  
  }*/
  
  .DetailsView-FieldHeader {
      padding: 2px 5px;
      background-color: #335E77;
      border-color: white;
      font-weight: bold;
      font-size: larger;
      color: white;
      text-align: left;
      width: auto;
  }
  .DetailsView tr:nth-child(odd) {
      background-color: #DCDCDC;    
  }
  </code></pre>
  
  <p>If I am setting up the css incorrectly, how should I be doing it?  I did try to use a named element like #GVcaption but it was applying to tables that weren't named, which broke other things on the site (main nav bar) :(</p>