Question

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

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

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文件。这是我试图模仿的示例表。

Answer 1

将border-collapse添加到您的表格规则中。请参阅以下代码;

＆＃13;

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

＆＃13;

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

＆＃13;

在此处详细了解表格样式：https://www.w3.org/TR/CSS2/tables.html 在这里：http://www.w3schools.com/cssref/pr_border-collapse.asp

如果您尝试完成屏幕截图中的内容，请注意table row rounded不是column的{{1}} row。请注意，我removed设置了table-collapsed规则，并在表格的第一行的border-radius上应用TD's时对该行应用渐变。

如果您需要在行上设置边框，请尝试将outline规则添加到表格行，但您无法为其添加border-radius。

＆＃13;

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

＆＃13;

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

＆＃13;

这里是一个jsfiddle所以你可以玩它。 :) https://jsfiddle.net/9pwr566t/7/

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对表格标题使用thead标记，这样您就可以简单地编写css而不会产生混淆，

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

示例Fiddle here

table { 
    border-collapse: collapse; 
}

table thead tr {
  background-color: rgb(116, 195, 80);
    -webkit-background:linear-gradient(rgb(116, 195, 80), rgb(160, 219, 132));
}

<table>
  <thead>
    <tr>
      <th>Head1</th>
      <th>Head2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
      <td>D</td>
    </tr>
  </tbody>
</table>

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

2 个答案: