Home > DeveloperSection > Forums > HTML table with rounded corners and gradient background
marcel ethan
marcel ethan

Total Post:70

Points:70
Posted on    March-02-2013 1:46 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1652  View(s)
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



AVADHESH PATEL

Total Post:604

Points:4216
Posted on    March-02-2013 7:56 AM

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>
















Recent Activities

jayprakash sharma Created New Discussion what is short circuit operator in java   36 minutes ago

Sumit Kesarwani added new Question What is the Vector class in java?   2 days ago

Anchal Kesharwani added new Blog JSON Syntax   9 days ago

Anchal Kesharwani added new Article How to Send Mail in Node.JS   9 days ago

Top Contributors

Don't want to miss updates? Please click the below button!