blocks|key|2482794|text|<style+type="text/css">
++++.test+
++++{+
++++++++-moz-border-radius:+5px;+
++++++++-webkit-border-radius:+5px;+
++++++++border:+#a9a9a9+1px+solid;+.
++++++++width:+200px;+
++++++++height:+50px;+
++++}
</style>
<table+class='test'>
++++<tr>
++++++++<td>
+++++++++++this+is+a+test
++++++++</td>
++++</tr>
</table>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2482795|这对我在Chrome和FF中是有效的。|unstyled|2482796|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;style type="text/css"&gt;
    .test 
    { 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
        border: #a9a9a9 1px solid; .
        width: 200px; 
        height: 50px; 
    }
&lt;/style&gt;
&lt;table class='test'&gt;
    &lt;tr&gt;
        &lt;td&gt;
           this is a test
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>This works for me in Chrome and FF.</p>


blocks|key|803429|text|是的，它可以在td和th元素的表中工作，但不能在tr上工作。您还可以在table上使用它来使整个桌子的角变圆。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|803430|如果要舍入一行单元格，以便舍入最左侧和最右侧的元素，则需要使用:first-child和:last-child伪类：|803431|tr+td:first-child+{
++++-moz-border-radius-topleft:+5px;
++++-moz-border-radius-bottomleft:+5px;
++++-webkit-border-top-left-radius:+5px;
++++-webkit-border-bottom-left-radius:+5px;

}

tr+td:last-child+{
++++-moz-border-radius-topright:+5px;
++++-moz-border-radius-bottomright:+5px;
++++-webkit-border-top-right-radius:+5px;
++++-webkit-border-bottom-right-radius:+5px;
}|code-block|syntax|javascript|803432|IE6不支持first-child，虽然IE7添加了对它的支持，但它仍然缺少last-child。但这对你来说无关紧要，因为border-radius无论如何都不能在这些浏览器中工作。|803433|entityMap^0|7|2|A|2|O|2|Z|5|0|V|C|18|B|0|0|6|B|12|A|1Q|D|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$]]

<p>Yes, it works inside a table on <code>td</code> and <code>th</code> elements, but not on <code>tr</code>. You can also use it on <code>table</code> to round the corners of the whole table.</p>

<p>If you want to round a row of cells so that the left- and rightmost elements are rounded, you need to use the <code>:first-child</code> and <code>:last-child</code> pseudo classes:</p>

<pre><code>tr td:first-child {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;

}

tr td:last-child {
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}
</code></pre>

<p><code>first-child</code> is not supported by IE6, and while IE7 adds support for it, it still lacks <code>last-child</code>. But that doesn't matter in your case as <code>border-radius</code> wouldn't work in those browsers anyway.</p>


blocks|key|2482886|text|我让它在没有表的情况下工作，使用div，使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2482887|display:+table-cell;
vertical-align:+middle;|code-block|syntax|javascript|2482888|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I got it to work without a table, using div, with :</p>

<pre><code>display: table-cell;
vertical-align: middle;
</code></pre>


blocks|key|802736|text|tr+td+{
++++border:+1px+solid+#dedede;
++++border-radius:3px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|802737|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>tr td {
    border: 1px solid #dedede;
    border-radius:3px;
}
</code></pre>


blocks|key|2482959|text|表格边框中的课程...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2482960|注意:下面的HTML/CSS代码只能在IE中查看。代码将无法在Chrome中正确呈现！|2482961|我们需要记住：|2482962|CSS表格有一个边框:它的外部边界(也可以有border-radius.)|2482963|The单元格)单元格本身也有边框(也可以有border-radius.)|unordered-list-item|2482964|
|2482965|The表格和单元格边框可以相互干扰:单元格边框可以穿透表格边框(即：|2482966|).To要看到这种效果，请修改下面代码中的样式规则，如下所示：|ordered-list-item|2482967|2482968|2482969|表{边框-折叠:分离；}|2482970|二、删除环绕表格角部单元格的样式规则。|2482971|三、然后玩边框间距，这样你就可以看到表格边框和单元格边框可以折叠的边框(使用:+interference.|2482972|However，-interference.|2482973|2482974|However，：collapse;).|2482975|2482976|When它们是折叠的，单元格和表格边框以不同的方式干涉：|2482977|2482978|i.如果表格边框是圆角的，但单元格边框仍然是方形的，则单元格的形状优先，表格将失去其弯曲的corners.ii。相反，如果角单元格是弯曲的，但表格边界是方形的，那么您将看到一个丑陋的正方形角点，它与角点单元格的曲率相邻。|2482979|考虑到单元格的属性优先，那么绕过表格的四个角的方法是:i.折叠表格上的边框(使用：|2482980|
-|2482981|：collapse;).ii。在表格的角单元格上设置所需的曲率。|2482982|2482983|三、如果桌子的边角是四舍五入的，这并不重要(例如:它的边框半径可以是零)。|2482984|​|2482985|			.zui-table-rounded+{
				border:+2px+solid+blue;
				/*border-radius:+20px;*/
				
				border-collapse:+collapse;
				border-spacing:+0px;
			}
						
			.zui-table-rounded+thead+th:first-child+{
				border-radius:+30px+0+0+0;
			}
			
			.zui-table-rounded+thead+th:last-child+{
				border-radius:+0+10px+0+0;
			}
			
			.zui-table-rounded+tbody+tr:last-child+td:first-child+{
				border-radius:+0+0+0+10px;
			}
			
			.zui-table-rounded+tbody+tr:last-child+td:last-child+{
				border-radius:+0+0+10px+0;
			}
			
			
			.zui-table-rounded+thead+th+{
				background-color:+#CFAD70;
			}
			
			.zui-table-rounded+tbody+td+{
				border-top:+solid+1px+#957030;
				background-color:+#EED592;
			}|code-block|syntax|javascript|2482986|			<table+class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus+Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah+Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben+McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus+Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason+Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>|2482987|2482988|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1X|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|20|8|@]|9|@]|A|$]]|$1|M|3|N|5|J|7|21|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|22|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|24|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|25|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|26|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|27|8|@]|9|@]|A|$]]|$1|Z|3|10|5|J|7|28|8|@]|9|@]|A|$]]|$1|11|3|L|5|6|7|29|8|@]|9|@]|A|$]]|$1|12|3|13|5|J|7|2A|8|@]|9|@]|A|$]]|$1|14|3|L|5|6|7|2B|8|@]|9|@]|A|$]]|$1|15|3|16|5|J|7|2C|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|2E|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|J|7|2F|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2G|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|J|7|2H|8|@]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|2J|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|2K|8|@]|9|@]|A|$]]|$1|1L|3|1M|5|1N|7|2L|8|@]|9|@]|A|$1O|1P]]|$1|1Q|3|1R|5|1N|7|2M|8|@]|9|@]|A|$1O|1P]]|$1|1S|3|1K|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1T|3|-4|5|6|7|2O|8|@]|9|@]|A|$]]]|1U|$]]

<h2>Lesson in Table Borders...</h2>

<p>NOTE:  The HTML/CSS code below should be viewed in IE only.  The code will not be rendered correctly in Chrome!</p>

<p>We need to remember that:  </p>

<ol>
<li><p>A table has a border: its outer boundary (which can also have a border-radius.)</p></li>
<li><p>The cells themselves ALSO have borders (which too, can also have a border-radius.)</p></li>
<li><p>The table and cell borders can interfere with each other:  </p>

<p>The cell border can pierce through the table border (ie: table boundary).  </p>

<p>To see this effect, amend the CSS style rules in the code below as follows:<br>
    i. table {border-collapse: separate;}<br>
    ii.  Delete the style rules which round the corner cells of the table.<br>
    iii. Then play with border-spacing so you can see the interference.</p></li>
<li><p>However, the table border and cell borders can be COLLAPSED (using: border-collapse: collapse;).</p></li>
<li><p>When they are collapsed, the cell and table borders interfere in a different way:</p>

<p>i. If the table border is rounded but cell borders remain square, then the cell's shape takes precedence and the table loses its curved corners.  </p>

<p>ii. Conversely, if the corner cell's are curved but the table boundary is square, then you will see an ugly square corner bordering the curvature of the corner cells.  </p></li>
<li><p>Given that cell's attribute takes precedence, the way to round the table's four corner's then, is by:  </p>

<p>i. Collapsing borders on the table (using: border-collapse: collapse;).  </p>

<p>ii. Setting your desired curvature on the corner cells of the table.<br>
iii. It does not matter if the table's corner's are rounded (ie: Its border-radius can be zero).  </p></li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>			&lt;table class="zui-table-rounded"&gt;
			&lt;thead&gt;
				&lt;tr&gt;
					&lt;th&gt;Name&lt;/th&gt;
					&lt;th&gt;Position&lt;/th&gt;
					&lt;th&gt;Height&lt;/th&gt;
					&lt;th&gt;Born&lt;/th&gt;
					&lt;th&gt;Salary&lt;/th&gt;
				&lt;/tr&gt;
			&lt;/thead&gt;
			&lt;tbody&gt;
				&lt;tr&gt;
					&lt;td&gt;DeMarcus Cousins&lt;/td&gt;
					&lt;td&gt;C&lt;/td&gt;
					&lt;td&gt;6'11"&lt;/td&gt;
					&lt;td&gt;08-13-1990&lt;/td&gt;
					&lt;td&gt;$4,917,000&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Isaiah Thomas&lt;/td&gt;
					&lt;td&gt;PG&lt;/td&gt;
					&lt;td&gt;5'9"&lt;/td&gt;
					&lt;td&gt;02-07-1989&lt;/td&gt;
					&lt;td&gt;$473,604&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Ben McLemore&lt;/td&gt;
					&lt;td&gt;SG&lt;/td&gt;
					&lt;td&gt;6'5"&lt;/td&gt;
					&lt;td&gt;02-11-1993&lt;/td&gt;
					&lt;td&gt;$2,895,960&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Marcus Thornton&lt;/td&gt;
					&lt;td&gt;SG&lt;/td&gt;
					&lt;td&gt;6'4"&lt;/td&gt;
					&lt;td&gt;05-05-1987&lt;/td&gt;
					&lt;td&gt;$7,000,000&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Jason Thompson&lt;/td&gt;
					&lt;td&gt;PF&lt;/td&gt;
					&lt;td&gt;6'11"&lt;/td&gt;
					&lt;td&gt;06-21-1986&lt;/td&gt;
					&lt;td&gt;$3,001,000&lt;/td&gt;
				&lt;/tr&gt;
			&lt;/tbody&gt;
		&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>I've been using HTML and CSS to style my resume, but I'm having difficulties styling a &lt;tr> element.</p>

<p>Does this not work inside a table ?</p>

<pre><code>-moz-border-radius: 5x;
-webkit-border-radius: 5px;
</code></pre>


Can I make a table line with rounded corners?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我一直在使用HTML和CSS来设计我的简历样式，但我在设计元素样式时遇到了困难。这在表中不起作用吗？-moz-border-radius: 5x;-webkit-border-radius: 5px;

问我能做一条圆角的桌线吗？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我能做一条圆角的桌线吗？EN