Byron Smith Byron Smith - 5 months ago 17
HTML Question

Adding a border around the first row in a table (and other styling)?

I'm trying to style the first row of a table, which is supposed to serve as a heading-row. Unfortunately, I can't seem to get a visible border around this row.

I went about this by trying to use the first:child pseudo class. I managed to successfully get a background gradient added to this row. The code for that looks like...

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


So now I'm trying to add a border around this row... And none of my code seems to really work. What's making it even more obnoxious for me is the fact that I have plenty of working border code in other parts of this css file... And none of it seems to give a visible border for this row. I actually don't want the border to span for the entire row. I am okay with the border simply going around each column/element within the row.

Right now my code is....

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


There must be something I'm not understanding about table styling...
I am not allowed to alter the original html5 file.
Here is an example table I'm trying to imitate.

Example table heading

Answer

Add border-collapse to your table rule. See the code below;

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>

Read more about table styling here : https://www.w3.org/TR/CSS2/tables.html and here : http://www.w3schools.com/cssref/pr_border-collapse.asp

If you're trying to accomplish something like the one on your screenshot, notice that it isn't the table row that is rounded it is the column of that row. Notice I removed the table-collapsed rule set on the table and apply a gradient on the row while applying the border-radius on the TD's of the table's first row.

If you need to have border on row try the outline rule to the table row, although you won't be able to add border-radius to it.

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>

here's a jsfiddle so you can play around with it. :) https://jsfiddle.net/9pwr566t/7/

I also updated your html code to follow the proper table structure, see the code below

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>