2 Columns, a few rows.
The width of the entire table seems to be set for good. No chance of changing it. All I can do is move the row separator so one columns gets stretched while the other expands.
This is the CSS file.
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 450px;
padding: 0;
margin: 0;
height: 39px;
}
caption {
padding: 0 0 5px 0;
width: 489px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
And this the table.
<table id="mytable" cellspacing ="0">
<caption>Table 1: Descriptions </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg" style="width: 47px">Configurations</th>
<th scope="col" abbr="Dual 1.8GHz">Original Stack</th>
</tr>
<tr>
<th scope="row" class="spec" style="width: 47px">Model</th>
<td class="style1">3xPa</td>
</tr>
<tr>
<th scope="row" class="specalt" style="width: 47px">Year</th>
<td class="alt" style="width: 181px">1998/A</td>
</tr>
</table>
I'm not sure what's preventing me from changing the width of the entire table. I've tried changing the width property in #mytable but it's doing absolutely nothing. I'm using VS 2010, aspx webform.
Any idea?
Changing the table width in the css works fine for me on chrome.
Try removing the width for your caption, the absolute width on the caption might be tricking you into thinking the table size is not changing...
caption {
padding: 0 0 5px 0;
/*width: 489px; Commented Out */
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
Related
Far Left borders shows nothing in entire table. how do I fix it in below CSS code ? Border is now showing any of the color all other cells are good.
Below is my existing CSS Code. Thanks in Advance.
#mytable {
padding: 0;
margin: 0;
border-spacing: 0px;
border-collapse: separate;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(/images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(/images/bullet1.gif) no-repeat;
font: bold 10px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(/images/bullet2.gif) no-repeat;
font: bold 10px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/* Below CSS is used for jQuery Popup window used for File Upload*/
#fade {
/*--Transparent background layer--*/
display: none;
/*--hidden by default--*/
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block {
display: none;
/*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
<table id="mytable">
<tr>TEST</tr>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST
<td>TEST</td>
</tr>
</table>
If I understand right you want the same border in left td. You can use this:
td:first-child {
border-left: 1px solid #C1DAD7;
}
#mytable {
padding: 0;
margin: 0;
border-spacing: 0px;
border-collapse: separate;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(/images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(/images/bullet1.gif) no-repeat;
font: bold 10px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(/images/bullet2.gif) no-repeat;
font: bold 10px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/* Below CSS is used for jQuery Popup window used for File Upload*/
#fade {
/*--Transparent background layer--*/
display: none;
/*--hidden by default--*/
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block {
display: none;
/*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
td:first-child {
border-left: 1px solid #C1DAD7;
}
<table id="mytable">
<tr>TEST</tr>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST
<td>TEST</td>
</tr>
</table>
Well, you could just add border-left: 1px solid #C1DAD7; to your td definition and maybe change border-collapse: separate; to border-collapse: collapse; in #mytable.
It's also possible to add left border-left: 1px solid #C1DAD7; on entire table in #mytable.
The common solution is to either use :first-child or the adjacent operator: + but these are not supported in IE6. You may need to handle that browser separately for these styles if this is a requirement. (Use conditional comments, maybe?)
Anyway, I've tried to pull out the relevant CSS and assumed some things about the markup to come up with this:
#mytable {
padding: 0;
margin: 0;
border-spacing: 0px;
border-collapse: separate;
border: 1px solid #C1DAD7;
}
td + td, th + th {
border-left: 1px solid #C1DAD7;
}
tr + tr {
border-top: 1px solid #C1DAD7;
}
td {
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(/images/bg_header.jpg) no-repeat;
}
<table id="mytable">
<tr>
<th>TEST1</th>
<th>TEST2</th>
<th>TEST3</th>
<th>TEST4</th>
</tr>
<tr>
<td>TEST1</td>
<td>TEST2</td>
<td>TEST3</td>
<td>TEST4</td>
</tr>
</table>
I've found similar tops for combining classes using the comma to separate them; however when I try it with the table class only the last table is receiving the style. Here is a small sample of what I'm trying to clean up:
table.tslist {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.djrlist {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.vacation {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.tslist td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
table.djrlist td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
table.vacation td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
As I mentioned I tried table.tslist, table.djrlist, table.vacation {....} but no luck.
I'm guessing that you are doing something like this:
table.x, table.y td { }
and assuming that it'll expand out and apply to all the TD elements. It won't. You need something like this instead:
table.x td, table.y td { }
Be sure to include the element type in your seperators:
table.tslist,
table.djrlist,
table.vacation
{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.tslist td, <-----
table.djrlist td, <-----
table.vacation td <----- {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
I'm guessing you don't even need to do multiple styles like that. Classes are not like IDs, you can use them more than once.
If all of your tables are styled the same, just replace all of this:
<table class="tslist">...</table>
<table class="vacation">...</table>
<table class="djrlist">...</table>
with
<table class="tslist">...</table>
<table class="tslist">...</table>
<table class="tslist">...</table>
You can then remove the unused style entries from the css file.
I have a webpage in which I m trying to get border correct across all browsers.
See http://dl.dropbox.com/u/17256431/SpreadsheetConverter/border-3/border-3.htm
The webpage has html 5 doctype and table has been styled with border-collapse:collapse.
The desired result is as seen in Chrome. See
However, in IE 9, a border is not rendered. See
The cell with content 'j' has top border = 2px defined.
If I view in IE 9 in Quirks mode, the result becomes same as in Chrome. Why with border-collapse:collapse the border 2px and 0px merge into 0px?
Due to my application limitations, I need to use html 5 doctype and border-collapse:collapse.
Is there something that I m missing here? Any Ideas?
Thanks in advance!
Well,
For CSS inside *.ee121 add {position: absolute; margin-top: -2px; width: 189px;}
Inside *.ee126 add {position: absolute; width: 186px;}
/* begin: toolbar styles */
.toolbar {
margin-top: 5px;
background-color: #f1f1f1;
z-index: -1;
border-top: solid 4px #ff9c08;
border-bottom: solid 2px #D9d8CE;
display: inline-block;
height: 54px;
width: 100%;
}
.toolbar-upper {
margin-top: 5px;
background-color: #f1f1f1;
z-index: -1;
border-bottom: solid 4px #ff9c08;
border-top: solid 2px #D9d8CE;
display: inline-block;
height: 54px;
width: 100%;
}
.toolbar .tlb-btn {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
cursor: pointer;
text-align: center;
}
.toolbar .tlb-elm {
height: 22px;
}
.toolbar-upper .tlb-elm {
height: 22px;
}
.toolpanel {
float: left;
margin: 16px 0 0 16px;
}
.toolbarGreenbtn {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79c979), color-stop(1, #009900));
background: -moz-linear-gradient(center top, #79c979 5%, #009900 100%);
background-color: #009900;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #009900;
display: inline-block;
color: #ffffff;
font-family: arial;
font-size: .8em;
font-weight: bold;
padding: 0 14px;
text-decoration: none;
margin: 0;
height: 100%;
}
.toolbarBluebtn {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
background: -moz-linear-gradient(center top, #3d94f6 5%, #1e62d0 100%);
background-color: #1e62d0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #075bd1;
display: inline-block;
color: #ffffff;
font-family: arial;
font-size: .8em;
font-weight: bold;
padding: 0 14px;
text-decoration: none;
margin: 0;
height: 100%;
}
/* begin: toolbar hyperlink */
.tlb-nav-link {
display: table;
height: 54px;
float: left;
margin-left: 16px;
}
.tlb-nav-link div {
display: table-cell;
vertical-align: middle;
padding-right: 10px;
}
.tlb-nav-link a {
display: block;
font-size: 12px;
color: #2271E7;
text-decoration: none;
}
.tlb-nav-link a:hover {
color: #F16A22;
}
.tlb-nav-button {
float: left;
margin-top: 16px;
margin-left: 10px;
}
.tlb-nav-button div {
vertical-align: middle;
padding-right: 10px;
}
.tlb-nav-button a {
background-color: #94A1C1;
-webkit-border-radius: 4px;
-moz-border-radius: 3px;
border-radius: 4px;
padding: 3px 14px;
display: inline-block;
font-size: .8em;
color: white;
height: 100%;
font-family: arial;
margin-left: 5px;
text-decoration: none;
}
.tlb-nav-button a:hover {
background-color: #697cac;
text-decoration: underline;
}
/* end: toolbar hyperlink */
.ui-widget-content {
border: 1px solid #A0A0A0;
background: #FFFFFF !important;
}
/* Styles needed by SpreadsheetConverter */
*.ee100 {
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: bottom
}
*.ee103 {
border-bottom: 0.75pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: bottom
}
*.ee107 {
border: 0.75pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: bottom
}
*.ee108 {
border-left: 0.75pt solid windowtext;
border-top: 0.75pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: right;
vertical-align: bottom
}
*.ee111 {
border-top: 0.75pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: right;
vertical-align: bottom
}
*.ee112 {
border-left: 1.50pt solid windowtext;
border-top: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: right;
vertical-align: bottom
}
*.ee113 {
border-right: 1.50pt solid windowtext;
border-top: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: right;
vertical-align: bottom
}
*.ee114 {
border-bottom: 0.75pt solid windowtext;
border-left: 0.75pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: right;
vertical-align: bottom
}
*.ee115 {
border-bottom: 0.75pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: right;
vertical-align: bottom
}
*.ee116 {
border-bottom: 1.50pt solid windowtext;
border-left: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: right;
vertical-align: bottom
}
*.ee117 {
border-bottom: 1.50pt solid windowtext;
border-right: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: right;
vertical-align: bottom
}
*.ee118 {
border-bottom: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: bottom
}
*.ee119 {
border-left: 1.50pt solid windowtext;
border-top: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: bottom
}
*.ee120 {
border-right: 1.50pt solid windowtext;
border-top: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: bottom
}
*.ee121 {
border-bottom: 1.50pt solid windowtext;
border-top: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: center;
vertical-align: bottom;
position: absolute;
margin-top: -2px;
width: 189px;
}
*.ee124 {
border-bottom: 1.50pt solid windowtext;
border-left: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: bottom
}
*.ee125 {
border-bottom: 1.50pt solid windowtext;
border-right: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: left;
vertical-align: bottom
}
*.ee126 {
border-bottom: 1.50pt solid windowtext;
border-left: 1.50pt solid windowtext;
border-right: 1.50pt solid black;
border-top: 1.50pt solid windowtext;
color: black;
font-family: Calibri, sans-serif;
font-size: 11.00pt;
font-style: normal;
font-weight: 400;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: center;
vertical-align: bottom;
position: absolute;
width: 186px;
}
textarea {
overflow: auto;
}
<form id='formc' name='formc' method='post' action='http://www.spreadsheetserver.com/server1/g/submit/submit.aspx' target='_top'>
<div id='tab'>
<div id='sheet-2' style='padding: 0em 1.4em;'>
<table width='512' cellspacing='1' cellpadding='0' style='border-spacing:1; border-collapse:collapse;' onkeydown='javascript:navigate(event);'>
<col width='64' />
<col width='64' />
<col width='64' />
<col width='64' />
<col width='64' />
<col width='64' />
<col width='64' />
<col width='64' />
<tr style='height:15pt'>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee100' style='height:15pt;'> </td>
</tr>
<tr style='height:15pt'>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee103' style='height:15pt;'>
single
</td>
<td class='ee100' style='height:15pt;' colspan='6'> </td>
</tr>
<tr style='height:16pt'>
<td class='ee100' style='height:16pt;' colspan='8'> </td>
</tr>
<tr style='height:15pt'>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee107' style='height:15pt;'>
a
</td>
<td class='ee107' style='height:15pt;'>
b
</td>
<td class='ee100' style='height:15pt;'> </td>
<td class='ee108' style='height:15pt;'>
1
</td>
<td class='ee111' style='height:15pt;'>
2
</td>
<td class='ee112' style='height:15pt;'>
3
</td>
<td class='ee113' style='height:15pt;'>
4
</td>
</tr>
<tr style='height:16pt'>
<td class='ee100' style='height:16pt;'> </td>
<td class='ee107' style='height:16pt;'>
c
</td>
<td class='ee107' style='height:16pt;'>
d
</td>
<td class='ee100' style='height:16pt;'> </td>
<td class='ee114' style='height:16pt;'>
5
</td>
<td class='ee115' style='height:16pt;'>
6
</td>
<td class='ee116' style='height:16pt;'>
7
</td>
<td class='ee117' style='height:16pt;'>
8
</td>
</tr>
<tr style='height:15pt'>
<td class='ee100' style='height:15pt;' colspan='8'> </td>
</tr>
<tr style='height:16pt'>
<td class='ee100' style='height:16pt;' colspan='4'> </td>
<td class='ee118' style='height:16pt;'> </td>
<td class='ee118' style='height:16pt;'> </td>
<td class='ee118' style='height:16pt;'> </td>
<td class='ee100' style='height:16pt;'> </td>
</tr>
<tr style='height:16pt'>
<td class='ee100' style='height:16pt;'> </td>
<td class='ee119' style='height:16pt;'>
e
</td>
<td class='ee120' style='height:16pt;'>
f
</td>
<td class='ee100' style='height:16pt;'> </td>
<td class='ee121' style='height:16pt;' colspan='3'>
t
</td>
<td class='ee100' style='height:16pt;'> </td>
</tr>
<tr style='height:16pt'>
<td class='ee100' style='height:16pt;'> </td>
<td class='ee124' style='height:16pt;'>
g
</td>
<td class='ee125' style='height:16pt;'>
h
</td>
<td class='ee100' style='height:16pt;' colspan='2'> </td>
<td class='ee126' style='height:16pt;' colspan='3'>
j
</td>
</tr>
</table>
</div>
</div>
</form>
<div class='toolbar no-print'>
<div class='tlb-elm toolpanel'>
<button class='tlb-btn toolbarBluebtn update'>Update</button>
<button class='tlb-btn toolbarBluebtn reset' style='margin-left:3px'>Reset</button>
<button class='tlb-btn toolbarBluebtn print' style='margin-left:3px'>Print</button>
<button class='tlb-btn toolbarGreenbtn submit' style='margin-left:12px'>Submit</button>
</div>
</div>
That is all and it should works for you, let me know if you have any question.
In main.html, I have this
<style type="text/css">
#hor-my-bundles
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#hor-my-bundles th
{
font-size: 14px;
font-weight: bold;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-my-bundles td
{
border-bottom: 1px solid #ccc;
color: #669;
padding: 6px 8px;
}
#hor-my-bundles tbody tr:hover td
{
color: #009;
}
</style>
<table id="hor-my-bundles">
<thead>
<tr>
<th scope="col"> Name </th>
...and a few more.....
</tr>
</thead>
<tbody>
<tr>
...body stuff
</tr>
</tbody>
</table>
I have a global css enabled, which has the following:
table{}
th{ background-color: #BBB; padding-left: 10px; padding-right: 10px;}
td, th{ }
td{}
tr:hover{ background-color: #dfd; }
But I thought since I've specified my table with a different cs id, <td> and etc should follow those as well. Instead, my <th> in this case is following the global style.
Why? Thanks.
You have not specified a background-color for your #hor-my-bundles th, #hor-my-bundles tbody tr:hover td styles. That's all I can see that would affect the style.
It correctly takes the styles in this example http://jsfiddle.net/sN8ed/2/
Is there any way I can rename this CSS code to only affect a certain table instead of all the tables on my site?
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
and the HTML code:
<table id="mytable" cellspacing="0">
<tr>
<th width="202" class="nobg" scope="col">Configurations</th>
<th width="250"></th>
</tr>
<tr>
<th scope="row" class="spec">Model</th>
<td>M9454LL/A</td>
</tr>
<tr>
<th scope="row" class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" class="spec">Frontside bus</th>
<td>900MHz per processor</td>
</tr>
<tr>
<th scope="row" class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
</tr>
</table>
You can change your CSS selectors to match only a specific table ID, so for instance...
#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
#mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
}
#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
To specifically target the table that you showed the html code for, do this:
#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
#mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
}
#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
#mytable td.alt {
background: #F5FAFA;
color: #797268;
}
#mytable th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#mytable th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
You wouldn't need the full table#mytable.
Put table#mytable in front of every css selector.
table#mytable th{
}
table#mytable th.nobg{
}
table#mytable td{
}
table#mytable td.alt{
}
table#mytable th.spec{
}
table#mytable th.specalt{
}
Or just #mytable.
#mytable th{
}
#mytable th.nobg{
}
#mytable td{
}
#mytable td.alt{
}
#mytable th.spec{
}
#mytable th.specalt{
}
You can prefix every rule with your table id (#mytable) so you'll have something like
#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
#mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
}
#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
#mytable td.alt {
background: #F5FAFA;
color: #797268;
}
#mytable th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#mytable th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}