Html 表格的边界半径不起作用

Question

提问by Tapas Bose

I want to add a border radius around the entire table. But the following code is not working in both the latest versions of Firefox and Google Chrome.

我想在整个表格周围添加一个边框半径。但以下代码在最新版本的 Firefox 和 Google Chrome 中均无效。

HTML

<table class="bordered">
    <thead>
        <tr>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>                            
        </tr>
    </tbody>                    
</table>

CSS

table {
    border-spacing: 0;
    width: 600px;
    margin: 30px;
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 1px #CCCCCC;
}        
table th:first-child {
    border-radius: 6px 0 0 0;
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
}

table th:last-child {
    border-radius: 0 6px 0 0;
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
}

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

table th {
    background-color: #DCE9F9;
    background-image: -moz-linear-gradient(center top , #F8F8F8, #ECECEC);
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
    border-top: medium none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

table td, table th {
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    padding: 10px;
    text-align: left;
}

jsFiddle

js小提琴

Answer 1

采纳答案by FelipeAls

It works, this is a problem with the tool used: normalized CSSby jsFiddle is causing the problem by hiding you the default of browsers...
See http://jsfiddle.net/XvdX9/5/

它有效，这是所用工具的问题：jsFiddle 的规范化 CSS通过隐藏浏览器的默认设置来导致问题...
见http://jsfiddle.net/XvdX9/5/

EDIT:
normalize.cssstylesheet from jsFiddle adds the instruction border-collapse: collapseto all tables and it renders them completely differently in CSS2.1:

编辑：来自 jsFiddle 的
normalize.css样式表将指令添加border-collapse: collapse到所有表格，并在 CSS2.1 中以完全不同的方式呈现它们：

Differences between the 2 models can be seen in this other fiddle: http://jsfiddle.net/XvdX9/11/(with some transparencies on cells and an enormous border-radius on the top-left one, in order to see what happens on table vs its cells)

这两种模型之间的差异可以在另一个小提琴中看到：http: //jsfiddle.net/XvdX9/11/（在单元格上有一些透明度，在左上角有一个巨大的边界半径，以便看看会发生什么在桌子上与它的单元格）

In the same CSS2.1 page about HTML tables, there are also explanations about what browsers should/could do with empty-cells in the separated borders model, the difference between border-style: noneand border-style: hiddenin the collapsing borders model, how width is calculated and which border should display if both table, row and cell elements define 3 different styles on the same border.

在关于 HTML 表格的同一个 CSS2.1 页面中，也有关于浏览器应该/可以对分离边框模型中的空单元格做什么的解释，折叠边框模型之间border-style: none和border-style: hidden中的区别，如何计算宽度以及应该使用哪个边框如果表格、行和单元格元素在同一边框上定义了 3 种不同的样式，则显示。

Answer 2

回答by Tapas Bose

border-collapse: separate !important;worked.

border-collapse: separate !important;工作。

Thanks.

谢谢。

HTML

<table class="bordered">
    <thead>
        <tr>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>                            
        </tr>
    </tbody>                    
</table>

CSS

table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 600px;
    margin: 30px;
}
.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
    background: #ECECEC;    
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}
.bordered th {
    background-color: #ECECEC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ECECEC));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC);
    background-image: -moz-linear-gradient(top, #F8F8F8, #ECECEC);    
    background-image: linear-gradient(top, #F8F8F8, #ECECEC);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}
.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

jsFiddle

js小提琴

Answer 3

回答by notgiorgi

This is my solution using the wrapper, just removing border-collapsemight not be helpful always, because you might want to have borders.

这是我使用包装器的解决方案，只是删除border-collapse可能并不总是有帮助，因为您可能想要有边框。

.wrapper {
  overflow: auto;
  border-radius: 6px;
  border: 1px solid red;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  border-style: hidden;

  width:100%;
  max-width: 100%;
}

th, td {
  padding: 10px;
  border: 1px solid #CCCCCC;
}

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Foo Bar boo</td>
        <td>Lipsum</td>
        <td>Beehuum Doh</td>
      </tr>
      <tr>
        <td>Dolor sit</td>
        <td>ahmad</td>
        <td>Polymorphism</td>
      </tr>
      <tr>
        <td>Kerbalium</td>
        <td>Caton, gookame kyak</td>
        <td>Corona Premium Beer</td>
      </tr>
    </tbody>
  </table>  
</div>

This article helped: https://css-tricks.com/table-borders-inside/

这篇文章有帮助：https: //css-tricks.com/table-borders-inside/

Answer 4

回答by Mackan

A note to this old question:

这个老问题的注释：

My reset.csshad set border-spacing: 0, causing the corners to get cut off. I had to set it to 3pxfor my radius to work properly (value will depend on the radius in question).

我的reset.css已经设置border-spacing: 0，导致角落被切断。我必须将它设置3px为我的半径才能正常工作（值将取决于所讨论的半径）。

Answer 5

回答by Bipon Biswas

<div class="leads-search-table">
                    <div class="row col-md-6 col-md-offset-2 custyle">
                    <table class="table custab bordered">
                    <thead>

                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Parent ID</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                            <tr>
                                <td>1</td>
                                <td>News</td>
                                <td>News Cate</td>
                                <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Products</td>
                                <td>Main Products</td>
                                <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Blogs</td>
                                <td>Parent Blogs</td>
                                <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
                            </tr>
                    </table>
                    </div>
                </div>

Css

css

.custab{
    border: 1px solid #ccc;
    margin: 5% 0;
    transition: 0.5s;
    background-color: #fff;
    -webkit-border-radius:4px;
    border-radius: 4px;
    border-collapse: separate;
}

Html 表格的边界半径不起作用

提问by Tapas Bose

HTML

HTML

CSS

CSS

采纳答案by FelipeAls

回答by Tapas Bose

回答by notgiorgi

回答by Mackan

回答by Bipon Biswas

相关推荐

最近更新

标签

Html 表格的边界半径不起作用

提问by Tapas Bose

HTML

HTML

CSS

CSS

采纳答案by FelipeAls

回答by Tapas Bose

回答by notgiorgi

回答by Mackan

回答by Bipon Biswas

相关推荐

Html 如何在远程unix服务器中查看html文件？

Html IE8 - 顶部有边距的容器：10px 没有边距

Html 在 CSS 中水平调整页面大小时如何停止图像缩小

Html HTML5 视频在 IE 11 中不起作用

相关推荐

最近更新

标签