Bule Posted January 3, 2013 Share Posted January 3, 2013 Please refer to my example below. I apologize for the length of the example, I tried slimming it down, but did not want to leave out any of the markup elements that may affect what I'm trying to do. There are two tables. I'm trying to get the top row of the table to stretch over the entire 4 columns of the table, have a slightly darker background and slightly different formatting to stand out. In the first example, it is as if the colspan attribute is ignored. Or something else frames the term. In the second example, the background applies only to the text, but the border of the cell is not colored. Id there some way I can get the background effect of the first table in the single-column appearance of the second table? Thank you/ <!DOCTYPE HTML ><html> <head> <title>title</title> <style> body { /*background-color:#FEFAF2;*/ background-color:#ffffff; color:black; font-size:1em; font:"sans-serif"; } h1 { color:#A0522D; } table { width:100%; } table, th, td { background-color:#FDF5E6; border-collapse:collapse; font-size:14px; border:1px solid #000000; padding:4px; } .crpl { margin-top:2em; margin-bottom:2em; margin-right:5em; margin-left:1em; } .term{ color:#A0522D; font-family:sans-serif; font-size:150%; line-height:150%; background-color:#E0E0D0; width:100%; display:block; } .col_arg{ width:10%; } .col_res{ width:10%; } .col_note{ width:10%; } .note{ font-family:monospace; text-align:center; } .col_opr{ width:70%; } </style> </head> <body> <h1>CRPL Syntax Reference</h1> <div class="crpl"> <p>broken table 1</p> <table> <colgroup> <col class="col_arg" /> </colgroup> <colgroup> <col class="col_res" /> </colgroup> <colgroup> <col class="col_note" /> </colgroup> <colgroup> <col class="col_opr" /> </colgroup> <thead> <tr > <td colspan="4" class="term"> <!-- --> <a id="term1">term1</a> </td> </tr> <tr> <th>Arguments</th> <th>Result</th> <th>Notation</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td>Cond</td> <td></td> <td Class="note">b1 --</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id lacus quis tellus condimentum consequat ac eu neque. Donec luctus rhoncus condimentum. Maecenas eget pretium magna. </td> </tr> </tbody> </table> <div style="height:2em;"> <!-- --> </div> <p>broken table 2</p> <table> <colgroup> <col class="col_arg" /> </colgroup> <colgroup> <col class="col_res" /> </colgroup> <colgroup> <col class="col_note" /> </colgroup> <colgroup> <col class="col_opr" /> </colgroup> <thead> <tr > <td colspan="4"> <!-- --> <a class="term"id="term2">term2</a> </td> </tr> <tr> <th>Arguments</th> <th>Result</th> <th>Notation</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td>Cond</td> <td></td> <td Class="note">b1 --</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id lacus quis tellus condimentum consequat ac eu neque. Donec luctus rhoncus condimentum. Maecenas eget pretium magna. </td> </tr> </tbody> </table> <div style="height:2em;"> <!-- --> </div> </body></html> Link to comment Share on other sites More sharing options...
Bule Posted January 3, 2013 Author Share Posted January 3, 2013 I only need to post here to fix my own problems. Actually, I asked about CSS tools in a different post and Deirdre's Dad showed me the Firefox Inspect tool on the Web developers menu in Firefox. That helped me figure out that there was a display:block style associated with that element. I'm not sure what the attribute does, or why I put it there, but deleting it fixed this problems and didn't seem to break any other styling I had, so I muddle forth... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now