Я могу сделать строку таблицы со скругленными углами?

Question

Я могу сделать строку таблицы со скругленными углами?

Я использовал HTML и CSS для моделирования моего резюме, но я испытываю затруднения при моделировании <TR> элемента.

Разве это не работает в таблице?

-moz-border-radius: 5x;
-webkit-border-radius: 5px;

16

css css3

задан Manu 4 February 2010 в 09:52

3 ответа

Я заставил его работать без таблицы, используя div, с:

display: table-cell;
vertical-align: middle;

0

ответ дан 30 November 2019 в 21:36

<style type="text/css">
    .test 
    { 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
        border: #a9a9a9 1px solid; .
        width: 200px; 
        height: 50px; 
    }
</style>
<table class='test'>
    <tr>
        <td>
           this is a test
        </td>
    </tr>
</table>

У меня это работает в Chrome и FF.

-3

ответ дан 30 November 2019 в 21:36

Другие вопросы по тегам:

css css3

Похожие вопросы:

score 25 · Accepted Answer

Да, он работает внутри таблицы на td и th элементов, но не на tr . Вы также можете использовать его на столе , чтобы скруглить углы всего стола.

Если вы хотите округлить ряд ячеек так, чтобы крайние левые и правые элементы были округлены, вам нужно использовать псевдо : first-child и : last-child классы:

tr td:first-child {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;

}

tr td:last-child {
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

first-child не поддерживается IE6, и хотя IE7 добавляет его поддержку, ему все еще не хватает last-child . Но в вашем случае это не имеет значения, поскольку border-radius в любом случае не будет работать в этих браузерах.