圆边桌答案 - 爱码网

【问题标题】：Round bordered table圆边桌
【发布时间】：2015-02-21 15:37:23
【问题描述】：

我想要一个带有圆形边框的 HTML 表格。我不希望有一条圆线与表格接壤，但实际上它是圆形的。

请注意，顶行和底行都应该是四舍五入的。

顺便说一句，我的实际表格使用的是引导程序中的“table table-bordered table-hover”css 类。

这是我的实际表格：

这就是我想要做的：

有任何想法吗？谢谢！

【问题讨论】：

.... 使用边界半径？ ....你试过什么？
见Rounded tables in Twitter Bootstrap 3
嗨@Danko，我确实尝试过，但由于引导类“table”和“table-bordered”，它无法正常工作。最后，“溢出：隐藏”属性阻止它工作，我不太确定为什么。但它还是奏效了！谢谢大家。
@ckuijjer 就是这样！！工作完美。非常感谢！

标签： html twitter-bootstrap css

【解决方案1】：

table tr:first-of-type {
    border-radius: 5px 5px 0 0;}

table tr:last-of-type {
    border-radius: 0 0 5px 5px;}

或者放在桌子上

table {
    border-radius: 5px;}

【讨论】：

这不是真正的工作。我错过了什么吗？我正在使用所有常见的标签，如 table、thead、th、tbody、tr、td。
我在这里推测，但您可能需要一个边框才能使用边框半径，如果是这种情况，请尝试为您的表格或行添加透明边框。

【解决方案2】：

使用这个 CSS 代码来圆角：

.table-bordered {
  border-radius: 5px;
}

【讨论】：

【解决方案3】：

您可以通过在 css 中添加 border-radius 来做到这一点。

table {
   border-radius: 4px;
}

我写了一个非常简单的例子，所以你可以看到输出；

http://jsfiddle.net/oLrp862d/1/

编辑后在此处包含代码；

table {
    background: white;
    border: 1px solid #c3c3c3;
    border-radius: 5px;
    width: 50%;
    border-spacing: 0px;
    border-collapse: separate;
}
table th {
    font-weight: 600;
    font-size: 1.1em;
    text-align: center;
    background: #c6c6c6;
}
table td {
    background: transparent;
}

<table>
    <tr>
        <th>Name</th>
        <th>Amount</th>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
</table>

【讨论】：

【解决方案4】：

研究下面的例子。

table {
   border-radius: 10px;
    border: solid 2px red;
    width: 400px;
    height: 400px;
    overflow: hidden;
  
}

tr:last-of-type td {
  border-bottom: none;
  }

tr td:last-child {
  border-right: none;
  }


td {
    text-align: center;
   border-bottom: solid 1px #000;
  border-right: solid 1px #000;
  
}

<table>
    <tr>
        <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
    <tr>
        <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
    <tr>
         <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
</table>

【讨论】：