Question

我一直在使用HTML和CSS来设置简历的样式，但是我在设计＆lt; tr＆gt;时遇到了困难。元件。

这不适用于表格吗？

-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中正确呈现！

我们需要记住：

表格有一个边框：它的外边界（也可以有一个边框半径。）
单元格本身也有边框（也可以有边框半径。）
表格和单元格边框可能互相干扰：

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

要查看此效果，请按以下方式修改以下代码中的CSS样式规则：
一世。 table {border-collapse：separate;}
II。删除围绕表格角落单元格的样式规则 III。然后使用边框间距播放，以便您可以看到干扰。
但是，表边框和单元格边框可以是COLLAPSED（使用：border-collapse：collapse;）。
当它们折叠时，单元格和表格边框会以不同的方式干扰：

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

II。相反，如果角单元是弯曲的，但是表边界是方形的，那么你会看到一个与角单元的曲率接近的丑陋的方角。
鉴于单元格的属性优先，那么围绕表格的四个角落的方式是：

我。折叠桌面上的边框（使用：border-collapse：collapse;）。

II。在桌子的角落单元上设置所需的曲率 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

class Receiver<T> where T : BaseClass, new() {
    private T obj = new T();
    public string objTitle() { return obj.title(); }
}

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。

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

5 个答案:

课程......