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

Total Post:79

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

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1768  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:4228
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

Pravesh Singh Created New Discussion Stop items with same id being add in a session   4 hours ago

Barbara Jones added new Question What is ANR?   2 days ago

Kamlakar Singh added new Blog Convert Text Document to PDF File   15 days ago

Kamlakar Singh added new Article Introduction to Backbone.js   15 days ago

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