我可以制作圆角的桌子线吗？

Question

我一直在使用 HTML 和 CSS 来设置我的简历样式，但我在设置

元素的样式时遇到了困难。

这在表格中不起作用吗？

-moz-border-radius: 5x;
-webkit-border-radius: 5px;

【问题讨论】：

• 你能举个例子吗？

Answer 1

是的，它适用于td 和th 元素的表内，但不适用于tr。您也可以在table 上使用它来圆整张桌子的角。

如果要对一行单元格进行四舍五入，使最左边和最右边的元素被四舍五入，则需要使用:first-child 和:last-child 伪类：

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

IE6 不支持first-child，虽然IE7 增加了对它的支持，但它仍然缺少last-child。但这在您的情况下并不重要，因为 border-radius 在这些浏览器中无论如何都不起作用。

Answer 2

表格边框课程...

注意：下面的 HTML/CSS 代码只能在 IE 中查看。代码将无法在 Chrome 中正确呈现！

我们需要记住：

1. 表格有一个边框：它的外边界（也可以有一个边框半径。）

2. 单元格本身也有边框（也可以有边框半径。）

3. 表格和单元格的边框会相互干扰：

   单元格边框可以穿透表格边框（即：表格边界）。

   要看到这个效果，修改下面代码中的CSS样式规则如下：
   一世。表 {border-collapse: 分开;}
   ii.删除表格角落单元格的样式规则。
   iii.然后使用border-spacing，这样您就可以看到干扰。

4. 但是，表格边框和单元格边框可以折叠（使用：border-collapse:collapse;）。

5. 当它们被折叠时，单元格和表格边框会以不同的方式相互干扰：

   我。如果表格边框是圆形的，但单元格边框保持方形，则单元格的形状优先，表格将失去其弧形角。

   二。相反，如果角单元是弯曲的但表格边界是方形的，那么您将看到一个丑陋的方形角与角单元的曲率接壤。

6. 鉴于单元格的属性优先，那么圆桌四个角的方法是：

   我。折叠表格上的边框（使用：border-collapse:collapse;）。

   二。在表格的角单元格上设置所需的曲率。
   iii.桌子的角是否圆角并不重要（即：它的边框半径可以为零）。

			.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;
			}

			<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>

Answer 3

我让它在没有表格的情况下工作，使用 div，有：

display: table-cell;
vertical-align: middle;

Answer 4

tr td {
    border: 1px solid #dedede;
    border-radius:3px;
}

Answer 5

<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>

这适用于我在 Chrome 和 FF 中。