0

UPDATE : NOW IT WORKS IN CHROME AND NOT IN FIREFOX

I cant get a border radius and and a gradient on the header of the table at the same time.

//normal table
<table cellspacing="0">
    <thead>
        <tr class ="header">
        <th>one</th><th>two</th><th>three</th><th>four</th>
        </tr>
    </thead>
    <tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
    <tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
    <tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
</table>

css that is not working. the gradient was taken from some gradient generator

    tr:nth-child(even){
        background-color: yellow;
    }
        tr:nth-child(odd){
        background-color: green;
    }
    table thead tr.header{
            border-top-left-radius: 30px;
    border:1px solid black;
         background-image: linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
        background-image: -o-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
        background-image: -moz-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
        background-image: -webkit-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
        background-image: -ms-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);

        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.19, rgb(52,156,235)),
          color-stop(0.6, rgb(61,224,216))
        );
    }


table thead tr.header > th:nth-child(1){
border-top-left-radius:10px; 


}

I would definitely like it to work in major browsers

not working jsfiddle

4

2 回答 2

1

您使用的属性名称不正确，它是border-top-left-radius 而不是border-radius-top-left，您需要一个边框来应用边框半径。

于 2013-10-29T05:29:54.930 回答
1

CSS：

.border{
            border: 2px solid #666666;
            border-radius: 5px 5px 0px 0px;
            -moz-border-radius: 5px 5px 0px 0px;
            -webkit-border-radius: 5px 5px 0px 0px;
        }
        table {
            margin: 50px;
            border-spacing: 0;
            width: 450px;
        }        
        .border th:first-child {
            border-radius: 5px 0 0 0;
            -moz-border-radius: 5px 0 0 0;
            -webkit-border-radius: 5px 0 0 0;
        }

        .border th:last-child {
            border-radius: 0 5px 0 0;
            -moz-border-radius: 0 5px 0 0;
            -webkit-border-radius: 0 5px 0 0;
        }

        .border td:first-child, .border th:first-child {
            border-left: medium none;
        }

        .border th {
            background-color: #666666;
            background-image: -moz-linear-gradient(center top , #3DE0D8, #349CEB);
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#3DE0D8), to(#349CEB), color-stop(.4, #3DE0D8));
        }

        .border td, .border th {
            border-left: 2px solid #666666;
            border-top: 2px solid #666666;
            padding: 10px;
            text-align: center;
        }

        tr:nth-child(even){
            background-color: yellow;
        }
        tr:nth-child(odd){
            background-color: green;
        }

html:

<table class="border">
        <thead>
            <tr>
                <th><label>one</label></th>
                <th><label>two</label></th>
                <th><label>Three</label></th>
                <th><label>Four</label></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><label>one</label></td>
                <td><label>two</label></td>
                <td><label>Three</label></td>
                <td><label>Four</label></td>
            </tr>
            <tr>
                <td><label>one</label></td>
                <td><label>two</label></td>
                <td><label>Three</label></td>
                <td><label>Four</label></td>
            </tr>
            <tr>
                <td><label>one</label></td>
                <td><label>two</label></td>
                <td><label>Three</label></td>
                <td><label>Four</label></td>
            </tr>
        </tbody>                    
    </table>
于 2013-10-29T06:45:30.197 回答