Decorate HTML Table.

2 posts, 1 answers
  1. Abhijit Shetty
    Abhijit Shetty avatar
    36 posts
    Member since:
    May 2010

    Posted 14 Mar 2013 Link to this post

    Hi,
    Can we use RadFormDecorator to decorate HTML table. Or is there any alternative to apply css to table similar like RadGrid?
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 15 Mar 2013 Link to this post

    Hi,

    It has been answered already in another ticket of yours, but here it is again:

    As RadForm applies its wrapper classes to the HTML element, it could be used for a CSS cascade to style a table on your choice as I did bellow making it to looks like sunset skin:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <style type="text/css">
             
            .RadForm_Sunset .sunsetStyle {
                border-collapse: collapse;
            }
             
            .RadForm_Sunset .sunsetStyle th {
                padding: 2px 3px;
                background: #B94D0A;
                color: #fff;
                border-width: 1px;
                border-style: solid;
                border-color: #CABAAB;
            }
             
            .RadForm_Sunset .sunsetStyle td {
                padding: 2px 3px;
                border-width: 1px;
                border-style: solid;
                border-collapse: collapse;
            }
             
            .RadForm_Sunset .sunsetStyle .rfdRow td {
                background-color: #fff;
                border-color: #CABAAB;
            }
             
            .RadForm_Sunset .sunsetStyle .rfdAltRow td {
                background-color: #F1E9DC;
                border-color: #CABAAB;
            }
             
             
        </style>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
            Skin="Sunset" />
            <table class="sunsetStyle" cellpadding="0" cellspacing="0">
                <thead>
                <tr>
                    <th>head 1</th>
                    <th>head 2</th>
                </tr>
                </thead>
                <tbody>
                    <tr class="rfdRow">
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                    </tr>
                    <tr class="rfdAltRow">
                        <td>Cell 3</td>
                        <td>Cell 4</td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
    </html>

    By using the RadForm_SkinName to cascade, you will ensure to apply the styles you like to the table you want.

    Regards,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top