带有溢出的表格边框半径：隐藏隐藏表格边框答案

【问题标题】：Table border-radius with overflow: hidden hides table border带有溢出的表格边框半径：隐藏隐藏表格边框
【发布时间】：2012-03-24 11:46:15
【问题描述】：

如何在不丢失边框的情况下圆整这张表格的顶角？

当我将溢出设置为隐藏时，我得到了圆角，但边框消失了。

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/

【问题讨论】：

WOW 宽度以英寸为单位，这是你每天都看不到的东西。

标签： html css html-table overflow

【解决方案1】：

你太亲密了。您的问题是浏览器正在呈现cellpadding 和cellspacing。没有 css-override，您必须在 HTML 中声明它。

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

【讨论】：

您还可以在 .line-item-header .item-summary { border-radius: 6px 6px 0 0; } 上添加另一种 css 样式，这将消除对 overflow:hidden; 的需求，但在使用边框时两者都可以提供最佳半径结果
html 属性似乎不起作用？ jsfiddle.net/benstenson/4xza6/1

【解决方案2】：

我不知道你为什么需要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;
    ...
}

【讨论】：

【解决方案3】：

我不知道为什么，但在某些情况下，border-radius 不起作用，您需要添加 overflow-hidden。确实，边界也被隐藏了。

但是 box-shadow 解决了这个问题，只需将这一行添加到表格的 css 中：

box-shadow:0 0 0 2px black;

【讨论】：