HTML TABLE WITH ROUNDED CORNERS AND GRADIENT BACKGROUND

marcel ethan

Total Post:105

Points:735
Posted by  marcel ethan
 6401  View(s)
Ratings:
Rate this:

Hi Everyone!

How to create html table with corners and gradient background using css with compatible all latest browser

My html table as below

<table id="tblIncidentQueue">
        <tr>
            <td>
                <strong>Show </strong>
                <asp:DropDownList ID="drpNumOfResults" runat="server">
                    <asp:ListItem Text = "10" Value="10" ></asp:ListItem>
                    <asp:ListItem Text = "20" Value="20" ></asp:ListItem>
                    <asp:ListItem Text = "50" Value="50" ></asp:ListItem>
                    <asp:ListItem Text = "100" Value="100" ></asp:ListItem>
                    <asp:ListItem Text = "All" Value="All" ></asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
</table>

Thanks in advance

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: HTML table with rounded corners and gradient background

    Hi Marcel!

    Try this way!

    <style type="text/css">
            .htnl_tbl
            {
                margin: 10px;
                -moz-border-radius: 10px; /* Firefox */
                -webkit-border-radius: 10px; /* Safari & Chrome */
                -khtml-border-radius: 10px; /* Linux browsers */
                border-radius: 10px; /* CSS3 compatible browsers */
                border-style: solid;
                border-width: 1px;
                border-color: #cccccc;
                padding: 0px;
                border-spacing: 0px;
                overflow: hidden;
                background: #eeeeee; /* Old browsers */
                background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
            }
        </style>

    html code

    <table id="tblIncidentQueue" class="htnl_tbl">
            <tr>
                <td>
                    <strong>Show </strong>
                    <asp:DropDownList ID="drpNumOfResults" runat="server">
                        <asp:ListItem Text = "10" Value="10" ></asp:ListItem>
                        <asp:ListItem Text = "20" Value="20" ></asp:ListItem>
                        <asp:ListItem Text = "50" Value="50" ></asp:ListItem>
                        <asp:ListItem Text = "100" Value="100" ></asp:ListItem>
                        <asp:ListItem Text = "All" Value="All" ></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
    </table>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!