CSS3的border-radius属性和border-collapse:collapse不能混合使用。如何使用边框半径创建带有圆角的折叠表格?


317

编辑-原标题:是否有其他方式来实现border-collapse:collapseCSS(为了有倒塌,圆角表)?

事实证明,仅使表格的边框折叠起来并不能解决根本问题,因此我更新了标题以更好地反映讨论内容。

我正在尝试使用该CSS3 border-radius属性制作带有圆角的表。我正在使用的表格样式如下所示:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

这是问题所在。我也想设置该border-collapse:collapse属性,并且在设置该属性时border-radius不再起作用。有没有一种基于CSS的方式可以获得与border-collapse:collapse不实际使用相同的效果?

编辑:

我在此处做了一个简单的页面来演示问题(仅Firefox / Safari)。

看来问题的很大一部分是将表设置为具有圆角不会影响Corner td元素的角。如果桌子全是一种颜色,那将不是问题,因为我可以td分别使第一行和最后一行的上角和下角变圆。但是,我在表中使用了不同的背景色来区分标题和条纹,因此内部td元素也将显示其圆角。

拟议解决方案摘要:

用另一个带有圆角的元素包围桌子是行不通的,因为桌子的四角“渗出了”。

将边框宽度指定为0不会折叠表格。

底部td四角设置CELLSPACING零后仍然广场。

相反,使用JavaScript可以避免此问题。

可能的解决方案:

这些表是用PHP生成的,因此我可以将一个不同的类应用于每个外部th / tds并分别设置每个角的样式。我不想这样做,因为它不是很优雅,并且要应用于多张桌子有点痛苦,所以请继续提出建议。

可能的解决方案2是使用JavaScript(特别是jQuery)对角进行样式设置。此解决方案也可以使用,但仍然不是我想要的(我知道我很挑剔)。我有两个保留意见:

  1. 这是一个非常轻量级的网站,我希望将JavaScript保持在最低水平
  2. 使用边界半径对我来说具有吸引力的一部分是优美的退化和渐进的增强。通过对所有圆角使用border-radius,我希望在支持CSS3的浏览器中拥有一个一致的圆形站点,并在其他浏览器中拥有一个一致的正方形站点(我在看着您,IE)。

我知道今天尝试使用CSS3似乎没有必要,但是我有自己的理由。我还要指出的是,此问题是w3c规范的结果,而不是CSS3的支持不佳,因此,当CSS3得到更广泛的支持时,任何解决方案都仍然是相关且有用的。


2
您不能将表格包装在div中,在div上设置border-radius和“ overflow:hidden”吗?我刚刚进行了测试,并且工作正常,除非您需要在具有固定宽度/高度的div或其父级中滚动/扩展。
伊恩

我认为最后一个CSS语句缺少分号。
JensG 2015年

3
这个问题是在2009年提出的。对于2015年没有比下面列出的解决方案更好的解决方案,我感到有些惊讶。W3C应该在几年前解决此问题。
Jonathan M

Answers:


241

我想到了。您只需要使用一些特殊的选择器即可。

圆角表的问题是td元素也没有变圆。您可以通过执行以下操作来解决此问题:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

现在一切正常,但仍然存在border-collapse: collapse破坏所有内容的问题。

一种解决方法是在表上添加border-spacing: 0默认值并保留默认值border-collapse: separate


75
为何不添加HTML border-spacing: 0;作为边框样式,而不是随意使用HTML ?
拉蒙·塔亚格

3
我在设置TR标签而不是TD标签的背景颜色时遇到问题。如果要剥离表,请确保设置的是TD而不是TR的背景色。
将剃须刀

那么,如果您必须在TR上使用背景色怎么办?有可能吗?
Mohoch 2011年

1
只是border-spacing: 0;像拉蒙一样添加,建议为我修复它。确保您将border-radiusborder-spacing样式添加到<th><td>元素,而不是<thead><tbody>
加文2013年

1
我正在使用引导程序,并且已经通过使用Ramon的建议找到了解决方案,例如:border-spacing: 0; border-collapse: separate;
Caner SAYGIN

84

以下方法可以通过使用box-shadow扩展为1px而不是“真实”边框的方式(在Chrome中进行测试)工作。

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

5
这是唯一对我有用的东西。但是,很难在表格边框上获得正确的颜色。
Thomas Ahle

如果您的桌子的背景颜色与周围区域不同,则无法使用。
g.pickardou

1
感谢您的代码,它也可用于Firefox 26.0
maxivis

1
@ g.pickardou可以通过在表元素上添加“ overflow:hidden”来解决该问题。
2016年

盒子阴影使桌子更大,所以侧面现在被切断了。

63

如果您想要一个纯CSS的解决方案(无需cellspacing=0在HTML中设置),该border-spacing: 0解决方案允许1px边框(您不能使用该解决方案),则我希望执行以下操作:

  • 设置一个border-rightborder-bottom你的表格单元格(tdth
  • 第一行中的单元格一个border-top
  • 第一列中的单元格一个border-left
  • 使用first-childlast-child选择器,在四个角中将表格单元的相应角四舍五入。

在此处查看演示。

鉴于以下HTML:

请参阅以下示例:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         
<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>


1
请写出包含(永久)代码的答案。如果答案中有很多代码,则只需张贴相关的位并说明它们为何相关。
塞缪尔·哈默

3
这是一个很好的解决方案,但是有点难以理解。我重写了一些样式规则并添加了代码说明,希望对您有所帮助。
Michael Martin-Smucker 2012年

也将半径应用于表格,否则在将背景应用于表格本身时看起来很奇怪。
山羊

什么是table.Info得了类什么关系?
Pylinux

28

您是否尝试过使用table{border-spacing: 0}而不是table{border-collapse: collapse}???


谢谢,这让我做了我需要做的事情(在“圆角”框顶部包含一系列TH元素,其中包含下面的所有TD)
RonLugge 2012年

12
问题border-spacing: 0是您不能有1px的边框,对吗?因为边界堆叠而不是折叠。
Michael Martin-Smucker,2012年

1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;完全满足了我的需求。
Milad.Nozari,

23

您可能必须在表格周围放置另一个元素,并使用圆角边框设置样式。

工作草案指定是border-radius不适用于表格元素时的值border-collapsecollapse


我也考虑过这一点,但是如果我创建一个div围绕桌子并将其设置为具有圆角,则正方形桌子的角仍然会渗出。请参阅新发布的示例。
vamin

我能找到的最好的折衷方法是在表中添加THEAD块并对其应用灰色背景(表本身带有#eee)。标头单元溢出到表的边界后面而不是表的前面。然后我将表格边框增加到3px以隐藏溢出。
2009年

3
@vamin“渗出”-如果您使用则不行overflow:hidden;
Brian McCutchon 2013年

因此,在这种情况下,每个人都可以从此页面底部使用我的解决方案b2n.ir/table-radius
AmerllicA

15

正如Ian所说的,解决方案是将表嵌套在div内并进行如下设置:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

使用时overflow:hidden,方形角不会在div中流血。


请记住,任何想使用它的人,overflow: hidden任何弹出框/工具提示都将被包装器的尺寸剪裁。
user776686

7

据我所知,唯一的方法是修改所有单元格,如下所示:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

然后在右下角得到边框

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child在ie6中无效,但是如果您使用的是border-radius我,则认为您不在乎。

编辑:

查看示例页面后,您似乎可以使用单元格间距和填充来解决此问题。

您看到的粗灰色边框实际上是表格的背景(如果将边框颜色更改为红色,则可以清楚地看到它)。如果将单元格间距设置为零(或等效地:),td, th { margin:0; }则灰色的“边框”将消失。

编辑2:

我找不到只用一张桌子就能做到这一点的方法。如果将标题行更改为嵌套表,则可能能够获得所需的效果,但是它将需要更多的工作,而且不是动态的。


我添加了一个带有cellpacing = 0的示例,它更接近了。不良的边框消失了,但底角仍然渗出。
vamin

再次感谢您的帮助。这些表是用php生成的,因此我在考虑是否没有建议的高级解决方案,我将为每个角落分配一个类,并分别为其设置样式。
vamin

6

我尝试了一种使用伪元素的解决方法,:before并且:afterthead th:first-childthead th:last-child

与包裹表一起使用 <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

jsFiddle

在Chrome浏览器中对我有效(13.0.782.215)让我知道在其他浏览器中是否对您有效。


5

实际上,您可以将table内部添加div为包装器。然后将这些CSS代码分配给包装器:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

4

给定的答案仅在桌子周围没有边框时才有效,这是非常有限的!

我在SASS中有一个宏可以执行此操作,该宏完全支持外部内部边界,实现与border-collapse相同的样式:无需实际指定即可折叠。

在FF / IE8 / Safari / Chrome中测试。

由于IE8不支持border-radius :(

某些较旧的浏览器可能需要使用供应商前缀才能使用border-radius,因此请随时根据需要在代码中添加这些前缀。

这个答案不是最短的-但可以。

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

要应用此样式,只需更改您的

<table>

标记为以下内容:

<table class="roundedTable">

并确保在HTML中包含上述CSS样式。

希望这可以帮助。


您不再需要边界半径的前缀,而是FF 3.6(-moz)。另外,当然不再需要-khtml了。
Jonatan Littke

@JonatanLittke,如果您认为可以改善答案,则可以随时编辑答案。我删除了所有前缀,并添加了caniuse.com链接,以便人们可以自行决定的前缀border-radius
Michael Martin-Smucker

4

对于有边框和可滚动的表,请使用此表(替换变量,$起始文本)

如果使用theadtfoot或者th,只需更换tr:first-childtr-last-childtd他们。

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

4

我有同样的问题。border-collapse完全删除并使用: cellspacing="0" cellpadding="0" 在html文档中。例:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

这行得通,但是需要您随后使用firstchild / lastchild技巧来获得效果。
Thomas Ahle

4

我刚刚为此编写了一套疯狂的CSS,看起来很完美:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

3

边框折叠的解决方案:为表格分隔并显示:为tbody和thead使用内联表格。

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

没有理由制作此答案社区Wiki。这样做可以使您从答案中得不到声誉。
塔卡斯韦尔2012年

3

我是HTML和CSS的新手,我也在这里寻找解决方案,这是我发现的。

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

我尝试一下,猜猜它起作用了:)


3

遇到相同的问题后找到了这个答案,但是发现很简单:只需给表溢出即可:隐藏

不需要包装元素。当然,我不知道这在7年前最初提出该问题时是否会奏效,但现在已经奏效。


这是一个聪明的解决方案,但它也可以“删除”实际边界。在Chrome浏览器上,表格的右边界和底边界消失,所有圆角都没有边界。
亚历克斯·乔根森

3

带有圆角和边框的表格。使用@Ramon Tayag解决方案。

border-spacing: 0他指出,关键是要使用。

使用SCSS的解决方案。

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

2

我开始实验“展示”,我发现:border-radiusbordermarginpadding,在table显示有:

display: inline-table;

例如

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

但是我们需要width为每一列设置一个

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

2

这是来自http://medialoot.com/preview/css-ui-kit/demo.html的如何用圆角实现表的最新示例。它基于以上Joel Potter建议的特殊选择器。如您所见,它还包含一些使IE变得有点高兴的魔术。它包括一些额外的样式来替换行的颜色:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

1

这是一种方法:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}
<div>
  <table></table>
</div>

要么

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }


0

我总是使用Sass这样做

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

我想您可能还没有得到,他正在尝试border-collapse: collapse启用此功能。
giovannipds

@giovannipds看一下他自己的回复(可接受的答案)。我的方式只是另一种方式。现在删除“ -1”。
迭戈·梅洛

哦,很抱歉,您肯定是对的,我的错,他接受的答案似乎说的完全一样。我要坚持该问题标题中的内容,他强调说,他希望边界崩溃,所以我直接去了。如果可以的话,我会删除-1,但是我不能,您需要在答案中进行一些修改以允许我这样做。尝试提及一些有关使用不可能做到的事情border-collapse: collapse。再次原谅,我将等待您的更新。
giovannipds

0

迄今为止最好的解决方案来自您自己的解决方案,它是这样的:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}
<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>


-1

边界半径现已得到正式支持。因此,在以上所有示例中,您都可以删除“ -moz-”前缀。

另一个技巧是对顶部和底部行使用与边框相同的颜色。所有三种颜色都相同,即使不是物理颜色,它也可以融合在一起,看起来像是完美的圆桌。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.