Граница-радиус таблицы с переполнением: скрытая граница таблицы - PullRequest
Новая
       16

Граница-радиус таблицы с переполнением: скрытая граница таблицы

1 голос
/ 07 марта 2012

Как я могу округлить верхние углы этой таблицы, не теряя границы?

no overflow: hidden

Когда я устанавливаю переполнение скрытым, я получаю закругленные углы, но граница исчезла.

overflow: hidden

html 

<table class="line-items">
    <tr class="line-item-header">
        <td class="item-summary">
            Items
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
</table>​

css 

.line-items *
{   
    border:1px solid black;
}
.line-items
{
    border-radius:6px 6px 0 0;
    /*overflow:hidden;*/
    border:1px solid black;
    margin:20px;
    width:3in;
}
td
{
    padding:5px 10px;
}
.line-item-header
{
    background-color:black;
    color:white;
    font-family:arial black, arial, sans serif;
}
.line-item
{
    background-color:white;
}
.line-item:nth-child(odd)
{
    background-color:#eee;
}
body
{
    background-color:#ffd;
}​

http://jsfiddle.net/benstenson/3bvWS/1/

Ответы [ 3 ]

2 голосов
/ 07 марта 2012

Не знаю, зачем вам нужно overflow: hidden. Это сработало для меня. http://jsfiddle.net/elclanrs/3bvWS/13/

td, tr { display: block; }
tr {
    border:1px solid black;
    border-top: 0;
}
.line-item-header {
    border-radius: 6px 6px 0 0;
    ...
}
0 голосов
/ 06 июля 2014

Не знаю почему, но в некоторых случаях border-radius не работает, и вам нужно добавить overflow-hidden. И это правда, границы тоже скрыты.

Но box-shadow решит проблему, просто добавьте эту строку в CSS вашей таблицы: 

box-shadow:0 0 0 2px black;
0 голосов
/ 07 марта 2012

Ты оооочень близко.Ваша проблема в том, что cellpadding и cellspacing отображаются браузером.Нет переопределения css, для которого вы должны объявить его в своем HTML. 

<table class="line-items" cellpadding="0" cellspacing="0">
...