CSS妙招：轻松为HTML表格行添加圆角
在HTML中，直接为表格行元素<tr>设置<code>border-radius属性并不能实现圆角效果。这是因为<tr>元素是块级元素，而<code>border-radius属性主要应用于内联元素。
别担心，我们可以巧妙地利用单元格元素<td>和<code><th>的伪元素来解决这个问题！
<p><strong>解决方案：</strong></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>通过CSS选择器，我们可以为表格行的首尾单元格添加圆角。以下CSS代码能够实现这一效果：</p>
<pre class="brush:php;toolbar:false;"><code class="css">td:first-child, th:first-child {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
td:last-child, th:last-child {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}</code></pre>
<p>这段代码分别为表格行的第一个单元格(<code><td>或<code><th>)设置了左上角和左下角的圆角，以及为最后一个单元格设置了右上角和右下角的圆角。 请注意，由于<code><tr>是块级元素，其子元素会自动继承其宽度，因此<code><td>和<code><th>的宽度可能需要根据实际情况进行调整。
<p>通过这种方法，您可以轻松为您的HTML表格行添加美观的圆角效果，提升表格的视觉吸引力。</p>
</th>
