[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 444
  • Last Modified:

"equals" rows, overriding pre-existing borders

I have a table with css applied to it. I have applied a border formatting to all td tags and now wish to apply a border formatting to individual rows of the table. I assume that it doesn't like me applying borders to the tr tags when a border has pready been applied to the td tag... but I'm not sure why.

I have included the current table in the CODE section of the post. What I wish to do is apply a top and bottom border to each of the TOTAL rows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			body {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
			}
			td {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
			}
			input, select {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
				border: 1px solid #666666;
			}
			
			/* for formatting the results tables */
			table.results {
				background: #CCCCCC;
				border-width: 0px;
				border-style: none;
				border-collapse: collapse;
			}
			table.results td {
				padding: 2px;
				border-width: 1px;
				border-style: solid;
				border-color: #CCCCCC;
			}
			table.results tr.titles {
				background: #999999;
				font-weight: bold;
				text-align: center;
			}
			table.results tr.even {
				background: #FFFFFF;
				text-align: right;
			}
			table.results tr.odd {
				background: #EEEEEE;
				text-align: right;
			}
			table.results tr.totals {
				background: #DDDDDD;
				font-weight: bold;
				text-align: right;
				
				border-top: 1px solid #000000;
				border-bottom: 1px solid #000000;
			}
			table.results td.totals {
				border-top: 1px solid #EA9A1C;
				border-bottom: 1px solid #EA9A1C;
			}
			table.results td.totals_label {
				text-align: left;
			}
		</style>
	</head>
	
	<body>
        <table class="results">
            <tr class="titles">
                <td class="titles">Field 1</td>
                <td class="titles">Field 2</td>
                <td class="titles">Field 3</td>
                <td class="titles">Field 4</td>
            </tr>
            <tr class="even">
                <td>Name 1</td>
                <td>1</td>
                <td>1</td>
                <td>10</td>
            </tr>
            <tr class="totals">
                <td class="totals_label">Sub Totals:</td>
                <td>&nbsp;</td>
                <td>1</td>
                <td>10</td>
            </tr>
            <tr class="odd">
                <td>Name 2</td>
                <td>1</td>
                <td>2</td>
                <td>15</td>
            </tr>
            <tr class="totals">
                <td class="totals_label">Sub Totals:</td>
                <td>&nbsp;</td>
                <td>2</td>
                <td>15</td>
            </tr>
            <tr class="totals">
                <td class="totals_label">Grand Totals:</td>
                <td>&nbsp;</td>
                <td>3</td>
                <td>25</td>
            </tr>
        </table>
	</body>
</html>

Open in new window

0
SiM99
Asked:
SiM99
  • 2
1 Solution
 
hankknightCommented:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			body {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
			}
			td {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
			}
			input, select {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
				border: 1px solid #666666;
			}
			
			/* for formatting the results tables */
			table.results {
				background: #CCCCCC;
				border-width: 0px;
				border-style: none;
				border-collapse: collapse;
			}
			table.results td {
				padding: 2px;
				border-width: 1px;
				border-style: solid;
				border-color: #CCCCCC;
			}
			table.results tr.titles {
				background: #999999;
				font-weight: bold;
				text-align: center;
			}
			table.results tr.even {
				background: #FFFFFF;
				text-align: right;
			}
			table.results tr.odd {
				background: #EEEEEE;
				text-align: right;
			}
			table.results tr.totals {
				background: #DDDDDD;
				font-weight: bold;
				text-align: right;
				
				border-top: 1px solid #000000;
				border-bottom: 1px solid #000000;
			}
			table.results td.totals {
				border-top: 1px solid #EA9A1C;
				border-bottom: 1px solid #EA9A1C;
			}
			table.results td.totals_label  {
				text-align: left;
				display: block;
			}
 
			.borderTopBottom {
				border-top: 2px solid red !important;
				border-bottom: 2px solid red !important;
			}
 
		</style>
	</head>
	
	<body>
        <table class="results">
            <tr class="titles">
                <td class="titles">Field 1</td>
                <td class="titles">Field 2</td>
                <td class="titles">Field 3</td>
                <td class="titles">Field 4</td>
            </tr>
            <tr class="even">
                <td>Name 1</td>
                <td>1</td>
                <td>1</td>
                <td>10</td>
            </tr>
            <tr class="totals">
                <td class="totals_label borderTopBottom">Sub Totals:</td>
                <td class="borderTopBottom">&nbsp;</td>
                <td class="borderTopBottom">1</td>
                <td class="borderTopBottom">1z</td>
            </tr>
            <tr class="odd">
                <td>Name 2</td>
                <td>1</td>
                <td>2</td>
                <td>15</td>
            </tr>
            <tr class="totals">
                <td class="totals_label borderTopBottom">Sub Totals:</td>
                <td class="borderTopBottom">&nbsp;</td>
                <td class="borderTopBottom">2</td>
                <td class="borderTopBottom">15</td>
            </tr>
            <tr class="totals">
                <td class="totals_label borderTopBottom">Grand Totals:</td>
                <td class="borderTopBottom">&nbsp;</td>
                <td class="borderTopBottom">3</td>
                <td class="borderTopBottom">25</td>
            </tr>
        </table>
	</body>
</html>

Open in new window

0
 
SiM99Author Commented:
Thank you Hankknight, I had to use the "important!" keyword huh? :)
To explain my grading: it works, but I still had to do some more playing with it to get it to display correctly in a browser other than IE. The "display:block" was making the borders appear inside the "totals_label" cell, rather than outside the cell like the other cells on the "totals" row.
0
 
SiM99Author Commented:
Oh.. I just noticed that I also can't have the border width set to 1px, otherwise the top border doesn't show.

Oh well, lol
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now