Sponsored By
MindStick Cleaner
Advertise with Us
Advertisement
Advertise with Us
Follow Us
Follow _MindStick_ on Twitter View MindStick Software's LinkedIn profile View MindStick Software's Facebook profile
Mindstick
Article Article  Forum Forum  Blog Blog  Quiz Quiz  Beginner Beginner  Careers Careers  Contact Contact  Login Login  
Home | Product | Services | About Us | Interview | DeveloperSection | Submit an Article | Submit Blog
Report Abuse Form
Reason:    
   

Home >> Other Programming >> CSS/CSS3 >> HTML table with rounded corners and gradient background
Author Post

marcel ethan


Total Post: 61
Member Since: 12/31/2012
Points: 298
HTML table with rounded corners and gradient background
Posted On: 3/2/2013 1:46:42 AM

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

Author Post

AVADHESH PATEL


Total Post: 605
Member Since: 5/2/2012
Points: 5841
Re: HTML table with rounded corners and gradient background
Posted On: 3/2/2013 7:56:22 AM
Report Abuse Answer

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>

Report Abuse Form
Reason:    
 
Total Online Users: 5056
Advertisement
MindStick DataConverter
Advertise with Us
  
Copyright © 2009 - 2014MindStick. All Rights Reserved.