css3的border-radius属性和border-collapse:collapse don't mix。我如何使用border-radius创建一个圆角折叠表?

有没有另一种方法来实现border-collapse:collapse在CSS(为了有一个折叠，圆角表)?

因为事实证明，简单地让表的边界折叠并不能解决根本问题，所以我更新了标题以更好地反映讨论。

我正在试着做一张圆角的桌子使用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得到更广泛的支持时，任何解决方案仍然是相关的和有用的。

475984 次浏览
小开

据我所知，你能做到的唯一方法是修改所有的单元格，就像这样:

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，我假设你不在乎。

编辑:

在查看示例页面后，似乎可以通过单元格间距和填充来解决这个问题。

您所看到的厚厚的灰色边框实际上是表格的背景(如果您将边框颜色更改为红色，就可以清楚地看到这一点)。如果你将cellspacing设置为0(或等价地:td, th { margin:0; })，灰色的“边框”将消失。

编辑2:

只有一张桌子，我不知道该怎么做。如果将标题行更改为嵌套表，可能会得到想要的效果，但这需要更多的工作，而且不是动态的。

小开

您可能需要在表格周围放置另一个元素，并将其样式设置为圆形边框。

工作草案指定当border-collapse的值为collapse时，border-radius不适用于表元素。

小开
最佳答案

我想明白了。你只需要使用一些特殊的选择器。

圆角的问题是，td元素并没有变成圆角。你可以这样解决这个问题:

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

table tr:last-child td:last-child {
border: 2px solid green;
border-bottom-right-radius: 10px;
}
<table>
<tbody>
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
4
</td>
</tr>
</tbody>
</table>

现在一切都正确舍入了，除了仍然存在border-collapse: collapse破坏一切的问题。

一个解决方法是添加border-spacing: 0，并将默认的border-collapse: separate保留在表上。

小开

下面的方法(在Chrome中测试)通过使用带有1px扩展的box-shadow而不是"real"边境。

    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;
}
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baz</td>
<td>Qux</td>
</tr>
<tr>
<td>Life is short</td>
<td rowspan="3">and</td>
</tr>
<tr>
<td>Love</td>
</tr>
<tr>
<td>is always over</td>
</tr>
<tr>
<td>In the</td>
<td>Morning</td>
</tr>
</tbody>
</table>

小开

你有没有试过用table{border-spacing: 0}代替table{border-collapse: collapse} ??

小开
我也有同样的问题。 完全删除border-collapse并使用: cellspacing="0" cellpadding="0" 在HTML文档中。 例子:< / p > 
<table class="top_container" align="center" cellspacing="0" cellpadding="0">
小开

如果你想要一个css解决方案(不需要在HTML中设置cellspacing=0)，允许1px边界(你不能用border-spacing: 0解决方案)，我更喜欢做以下事情:

  • 为你的表格单元格(td和th)设置border-right和border-bottom
  • 将第一行中的单元格赋值为border-top
  • 将第一列中的单元格赋值为border-left
  • 使用first-child和last-child选择器，在四个角的表格单元格中圆角。

< a href = " http://codepen。 . io/mlms13/pen/CGgLF" rel="noreferrer">看这里的演示

给定以下HTML:

参见下面的例子: 


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 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;
border-top: solid 1px #bbb;
}


/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}


/* top-right border-radius */
table tr:first-child th: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>
<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>

小开

给出的答案只有在没有国界的情况下才有效，这是非常有限的!

我在SASS中有一个宏来做这件事，它完全支持外部而且内部边界，实现了与border-collapse: collapse相同的样式，而无需实际指定它。

在FF/IE8/Safari/Chrome测试。

在所有浏览器中提供漂亮的纯CSS圆形边界，但IE8(优雅地退化)，因为IE8不支持边界半径:(

一些旧的浏览器可能需要供应商前缀可以与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样式。

希望这能有所帮助。

小开

我尝试使用thead th:first-child和thead th:last-child上的伪元素:before和:after来解决问题

结合使用<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)让我知道这是否适用于其他浏览器。

小开

下面是一个最近的例子，说明如何从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;
}
小开

现在正式支持Border-radius。所以，在上面的所有例子中，你都可以去掉“-moz-”前缀。

另一个技巧是顶部和底部行使用相同的颜色作为边框。三种颜色都是一样的，它看起来就像一个完美的圆形桌子，尽管它不是物理上的。

小开

我开始实验“显示”，我发现:border-radius， border， margin， padding，在一个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;
}
小开

边界折叠解决方案:表和显示分开:体和标题内联表。

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;
}
小开

正如Ian所说，解决方案是将表嵌套在一个div中，并像这样设置:

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

使用overflow:hidden，方角不会贯穿div。

小开

对于一个有边框且可滚动的表，使用this (replace variables， $ starting texts)

如果你使用thead， tfoot或th，只需用它们替换tr:first-child和tr-last-child和td。

#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>
小开

我刚刚为这写了一套疯狂的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;
}
<table>
<thead>
<tr>
<th>
Table Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Table Data
</td>
</tr>
</tbody>
</table>

/* end complicated rounded table corners !*/
小开

我是新的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
}

我试了一下，猜猜效果如何:)

小开

在遇到同样的问题后找到了这个答案，但发现它非常简单:只需给表overflow:hidden

不需要包装元素。当然，我不知道7年前这个问题最初被问到的时候，这是否有用，但现在有用了。

小开

我总是这样用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;
}
}
}
小开

实际上，你可以在div中添加你的table作为它的包装器。然后将这些CSS代码分配给包装器:

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


table {
border-collapse: collapse;
}
小开

圆角表格和带边框的单元格。 使用@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;
}
}
小开

到目前为止，最好的解决方案来自你自己的解决方案，它是这样的:

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>

小开

这里有一个方法:

div {
border: 2px solid red;
overflow: hidden;
border-radius: 14px;
transform: rotate(0deg);
}
table {
border-spacing: 0;
background-color: blue;
height: 100%;
width: 100%;
}
<div>
<table>
<tr>
<td><br></td>
</tr>
</table>
</div>

或

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

简单的方法…

table {
border-collapse: inherit;
border: 1px solid black;
border-radius: 5px;
}
小开 

table {
width: 200px;
text-align: center;
border-radius: 12px;
overflow: hidden;
}


table td {
border-width: 1px 0 0 1px;
}


table tr:first-child td {
border-top: none;
}


table tr td:first-child {
border-left: none;
}


div {
background-color: lime;
}
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td><div>1</div></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

小开
一些其他的答案是好的，但没有一个考虑你使用thead， tbody和tfoot。或者是两种情况的组合。当你应用它们时，你会得到一些不必要的四舍五入或边框。 因此，我尝试从@NullUserException调整css-only answer，这就是我得到的:

table {
border-radius: 5px;
border-width: 2px;
border-style: solid;
border-color: darkgreen;
border-spacing: 0;
border-collapse: separate;
width: 100%;
}
table tr td,
table tr th {
border-right-width: 2px;
border-right-style: solid;
border-right-color: darkgreen;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: darkgreen;
}
table tr th:last-child,
table tr td:last-child {
border-right-width: 2px;
border-right-style: none;
border-right-color: darkgreen;
}
table tr:last-child td,
table tr:last-child th {
border-bottom-width: 2px;
border-bottom-style: none;
border-bottom-color: darkgreen;
}
/* top-left border-radius */
table :not(tfoot) tr:first-child th:first-child,
table :not(tfoot) tr:first-child td:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 0;
}


/* top-right border-radius */
table :not(tfoot) tr:first-child th:last-child,
table :not(tfoot) tr:first-child td:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 0;
}


/* bottom-left border-radius */
table :not(thead) tr:last-child th:first-child,
table :not(thead) tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}


/* bottom-right border-radius */
table :not(thead) tr:last-child th:last-child,
table :not(thead) tr:last-child td:last-child{
border-bottom-right-radius: 5px;
}


/*Handle thead and tfoot borders*/
table thead tr:first-child th,
table thead tr:first-child td {
border-top-style: none;
}
table thead tr:last-child th,
table thead tr:last-child td {
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: darkgreen;
}
table tfoot tr:last-child th,
table tfoot tr:last-child td {
border-bottom-style: none;
}
table tfoot tr:first-child th,
table tfoot tr:first-child td {
border-top-style: solid;
border-top-width: 2px;
border-top-color: darkgreen;
}
table tr:first-child th,
table tr:first-child td {
border-top-style: none;
}

darkgreen用于清楚地显示整个表的所有边界都是正确的。本质上，无论你在哪里看到darkgreen -就是在哪里设置表的边框。
这个codepen显示常规表，还有一个包含thead， tbody和tfoot。CSS与上面的相同，只是增加了th的样式重置。在写作的时候，你可以看到，它们都呈现相同的

小开

使用“overflow: hidden”;与“border-radius" 这与“;collapse"表也

例子:

< p > border - radius: 1 em; 溢出:隐藏的;< / p >
小开

我看到了很多奇怪的hack和变通方法，所以我想建议我的解决方案，创建一个具有border-radius和与border: collapse;相同的视觉效果的表，只需针对嵌套的行和单元格关闭边界。

你可以更深入地使用其他伪选择器来满足你的需求，比如first-child，等等，但这是最小的解决方案:

table {
width: 100%;
border-spacing: 0;
border-radius: 4px;
border: 1px solid #ccc;
}


th, td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}


th:last-child, td:last-child  {
border-right: none;
}


tr:last-child td {
border-bottom: none;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</tbody>
</table>


提交答案