在表格的第一行周围添加边框（以及其他样式）？

Byron Smith 发表于 Dev

拜伦·史密斯

我正在尝试设置表格的第一行的样式，该行应该用作标题行。不幸的是，我似乎在这一行周围看不到边框。

我通过尝试使用first：child伪类来解决这个问题。我设法成功地将背景渐变添加到此行。该代码看起来像...

tr:first-child {
    background-color: rgb(116, 195, 80);
    -webkit-background:linear-gradient(rgb(116, 195, 80), rgb(160, 219, 132));

所以现在我试图在该行周围添加边框...而且我的代码似乎都没有真正起作用。对我而言，更令人讨厌的是，我在此css文件的其他部分中有很多有效的边界代码，而事实似乎都没有为这一行提供可见的边界。我实际上不希望边框跨越整个行。我可以将边框绕行中的每个列/元素都可以。

现在我的代码是...

border-style: groove;
border-color: blue;
border-height: 5px;
border-radius: 4px;

关于表格样式，肯定有一些我不了解的地方。不允许我更改原始的html5文件。这是我要模仿的示例表。

艾伦（Allan）拼接

添加border-collapse到您的表格规则。参见下面的代码；

table { 
    border-collapse: collapse; 
}
tr:first-child {
    background-color: rgb(116, 195, 80);
    -webkit-background:linear-gradient(rgb(116, 195, 80), rgb(160, 219, 132));
   border : 1px solid #000;
  }

<table>

   <tr><td>Heading1</td><td>Heading2</td></tr>
   <tr><td>content</td><td>content</td></tr>

 </table>

在此处阅读有关表样式的更多信息：https : //www.w3.org/TR/CSS2/tables.html和此处：http : //www.w3schools.com/cssref/pr_border-collapse.asp

如果你想成就一番像你的截图之一，通知，这是不是table row就是rounded它是column的那个row。请注意，我removed在table-collapsed表上设置了规则，并在表的第一行的border-radius上应用了渐变，然后在行上应用了渐变TD's。

如果您需要在行上设置边框，请尝试将outline规则应用于表格行，尽管您将无法为其添加边框半径。

tr:first-child {
   color : #fff;
  background: #a4b357; /* Old browsers */
  background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */
    -webkit-background:linear-gradient(rgb(116, 195, 80), rgb(160, 219, 132));
   
  }


 tr:first-child th{
   border-top-left-radius : 5px;
   border-top-right-radius : 5px;
   border: 2px solid red;
   padding : 10px;

 }

<table>
				<tr><th>Team Name</th>
					<th>Location</th>
					<th>League Type</th></tr>
				<tr>
					<td>Afterburn - Air Force</td>
					<td>Colorado</td>
					<td>Men's</td>
				</tr>
</table>

这是一个jsfiddle，因此您可以尝试一下。:) https://jsfiddle.net/9pwr566t/7/

我还更新了您的html代码以遵循正确的表结构，请参见下面的代码

thead tr {
   color : #fff;
  background: #a4b357; /* Old browsers */
  background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */
    -webkit-background:linear-gradient(rgb(116, 195, 80), rgb(160, 219, 132));
   
  }


thead tr th{
   border-top-left-radius : 5px;
   border-top-right-radius : 5px;
   border: 2px solid darkgreen;
   padding : 10px;

 }

tbody tr {
   background-color : #E4F5D4;
}

tbody tr td {
   padding : 10px;
   color : #333;
}

   <table>
       <thead>
           <tr>
                <th>Team Name</th>
                <th>Location</th>
                <th>League Type</th>
            </tr>
       </thead>
       <tbody>
            <tr>
                <td>Afterburn - Air Force</td>
                <td>Colorado</td>
                <td>Men's</td>
            </tr>
       </tbody>
    </table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-03-3

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章