I am trying to set the width of a table in a CSS file. My CSS file declaration looks like
.specialTable {width:450px;}
the css file is loaded before the <head> via <linK
in the HTML I am using it as
<table id="OverallTable" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#000000" >
the above doesnt work.
The following works
<table id="OverallTable" style="width:450;" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#000000" >
CSS file included
:hover {font-size: 12px; color: #ff0066; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; }
a:active {font-size: 12px; color: #666699; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
/* color: #FFCF00;
text-decoration: none; used to decorated the link eg. underline*/
a.buttons:link {font-size: 12px; color: #FFCF00; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.buttons:visited {font-size: 12px; color: #FFCF00; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.buttons:hover {font-size: 12px; color: #FFCF00; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.buttons:active {font-size: 12px; color: #FFCF00; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
.clear {clear:both;}
.specialTable {width:450px;}
/* .specialTable {width:auto;}
style="width: 150px;"*/
body {font-size: 12px; background-color:#000000; margin-top: 0px; font-family: Arial, Verdana, Helvetica, sans-serif;}
/* scrollbar-face-color: #999966;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #666666;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #CCCC88;
scrollbar-arrow-color: #FFDD00;
background-color:#334433;
background-color:#333333; grey
text-align: center; */
form { margin:0;}
#container {
background-image: url(../images/Gifs/greyBack.jpg);
background: #333333;
margin: 0 auto;
width: 355px;
/* width: 1247px;
border: #999966 1px solid;
position: relative; */
position: fixed;
height: 791px;
}
/*791 1247*background: #666666;
position: fixed; ( to fix the container to the left) */
/*text-align: left; */
p {font-size: 12px; line-height: 16px; color: #CCCCAA; text-align: center; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
h1{ display: inline; font-size: 7pt; color: #DDEEDD; font-weight: normal; font-family: "verdana", "arial", "helvetica", sans-serif; }
h2{ display: inline; font-size: 9pt; color: #000000; font-weight: normal; font-family: "verdana", "arial", "helvetica", sans-serif; }
.siteT3 { font-size: 52px; color: #FFFFFF; font-weight:normal ; text-align: right; font-family: "Trebuchet MS"; margin-right: 10px; margin-top: 0px; }
.siteTitle { font-size: 30px; color: #AACCFC; font-weight: 200; text-align: center; font-family: "arial", "verdana", "helvetica", sans-serif;}
.siteTitle2 { font-size: 18px; color: #AACCFC; font-weight: 200; text-align: center; font-family: "arial", "verdana", "helvetica", sans-serif;}
.siteTitle1 { font-size: 52px; color: #FFFFFF; font-family: "arial", "verdana", "helvetica", sans-serif; font-weight:normal ; margin-left: 10px; margin-right: 10px; margin-top: 0px; text-align: right; }
.siteSubTitle { height: 23px; font-size: 16px; color: #FFFFFF; text-align: center; font-weight: normal; font-family: "Georgia", "Times New Roman", "Times", sans-serif;}
.siteSubTitleC4 { height: 14px; font-size: 14px; text-align: center; color: #000000; font-weight: bold; font-family: "Georgia", "Times New Roman", "Times", sans-serif;}
.siteSubTitleC5 { height: 12px; font-size: 12px; text-align: center; color: #000000; font-weight: normal; font-family: "Georgia", "Times New Roman", "Times", sans-serif;}
.siteSubTitleC41 { height: 14px; font-size: 14px; text-align: left; color: #CCCCAA; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
.siteSubTitleC51 { height: 12px; font-size: 12px; text-align: right; color: #CCCCAA; font-weight: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pLeft {font-size: 12px; line-height: 16px; color: #CCCCAA; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pLeft10 {font-size: 10px; color: #CCCCAA; text-align: left; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pCenter {font-size: 12px; line-height: 16px; color: #CCCCAA; text-align: center; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pLeftB10B {font-size: 10px; color: #000000; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pLeftB12N {font-size: 12px; color: #CCCCAA; text-align: left; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pLeftB12B {font-size: 12px; color: #CCCCAA; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pLeftR12B {font-size: 12px; color: #FF0000; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pLeftB14B { font-size: 14px; color: #CCCCAA; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pCenter10N {font-size: 10px; color: #666666; text-align: center; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pCenter12N {font-size: 12px; color: #CCCCAA; text-align: center; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pCenter12B {font-size: 12px; color: #CCCCAA; text-align: center; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.jim14B {font-size: 14px; color: #FF0000; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }CodePudding user response：
Have a look at the snippet below.
The styles are applied correctly to the table but it is not visible because you have dark background. Change the background color of your table or atleast color and border-color.
:hover {font-size: 12px; color: #ff0066; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; }
a:active {font-size: 12px; color: #666699; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
/* color: #FFCF00;
text-decoration: none; used to decorated the link eg. underline*/
a.buttons:link {font-size: 12px; color: #FFCF00; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.buttons:visited {font-size: 12px; color: #FFCF00; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.buttons:hover {font-size: 12px; color: #FFCF00; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.buttons:active {font-size: 12px; color: #FFCF00; font-weight: bold; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
.clear {clear:both;}
.specialTable {
width:450px;
background: white;
}
/* .specialTable {width:auto;}
style="width: 150px;"*/
body {font-size: 12px; background-color:#000000; margin-top: 0px; font-family: Arial, Verdana, Helvetica, sans-serif;}
/* scrollbar-face-color: #999966;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #666666;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #CCCC88;
scrollbar-arrow-color: #FFDD00;
background-color:#334433;
background-color:#333333; grey
text-align: center; */
form { margin:0;}
#container {
background-image: url(../images/Gifs/greyBack.jpg);
background: #333333;
margin: 0 auto;
width: 355px;
/* width: 1247px;
border: #999966 1px solid;
position: relative; */
position: fixed;
height: 791px;
}
/*791 1247*background: #666666;
position: fixed; ( to fix the container to the left) */
/*text-align: left; */
p {font-size: 12px; line-height: 16px; color: #CCCCAA; text-align: center; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
h1{ display: inline; font-size: 7pt; color: #DDEEDD; font-weight: normal; font-family: "verdana", "arial", "helvetica", sans-serif; }
h2{ display: inline; font-size: 9pt; color: #000000; font-weight: normal; font-family: "verdana", "arial", "helvetica", sans-serif; }
.siteT3 { font-size: 52px; color: #FFFFFF; font-weight:normal ; text-align: right; font-family: "Trebuchet MS"; margin-right: 10px; margin-top: 0px; }
.siteTitle { font-size: 30px; color: #AACCFC; font-weight: 200; text-align: center; font-family: "arial", "verdana", "helvetica", sans-serif;}
.siteTitle2 { font-size: 18px; color: #AACCFC; font-weight: 200; text-align: center; font-family: "arial", "verdana", "helvetica", sans-serif;}
.siteTitle1 { font-size: 52px; color: #FFFFFF; font-family: "arial", "verdana", "helvetica", sans-serif; font-weight:normal ; margin-left: 10px; margin-right: 10px; margin-top: 0px; text-align: right; }
.siteSubTitle { height: 23px; font-size: 16px; color: #FFFFFF; text-align: center; font-weight: normal; font-family: "Georgia", "Times New Roman", "Times", sans-serif;}
.siteSubTitleC4 { height: 14px; font-size: 14px; text-align: center; color: #000000; font-weight: bold; font-family: "Georgia", "Times New Roman", "Times", sans-serif;}
.siteSubTitleC5 { height: 12px; font-size: 12px; text-align: center; color: #000000; font-weight: normal; font-family: "Georgia", "Times New Roman", "Times", sans-serif;}
.siteSubTitleC41 { height: 14px; font-size: 14px; text-align: left; color: #CCCCAA; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
.siteSubTitleC51 { height: 12px; font-size: 12px; text-align: right; color: #CCCCAA; font-weight: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pLeft {font-size: 12px; line-height: 16px; color: #CCCCAA; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pLeft10 {font-size: 10px; color: #CCCCAA; text-align: left; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pCenter {font-size: 12px; line-height: 16px; color: #CCCCAA; text-align: center; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pLeftB10B {font-size: 10px; color: #000000; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pLeftB12N {font-size: 12px; color: #CCCCAA; text-align: left; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pLeftB12B {font-size: 12px; color: #CCCCAA; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pLeftR12B {font-size: 12px; color: #FF0000; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pLeftB14B { font-size: 14px; color: #CCCCAA; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif;}
.pCenter10N {font-size: 10px; color: #666666; text-align: center; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pCenter12N {font-size: 12px; color: #CCCCAA; text-align: center; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.pCenter12B {font-size: 12px; color: #CCCCAA; text-align: center; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }
.jim14B {font-size: 14px; color: #FF0000; text-align: left; font-weight: bold; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; }<table >
<tr>
<td>hello</td>
<td> hii</td>
</tr>
</table>CodePudding user response：
perhaps the css file has a different name or is located in a different folder, and it is not connected correctly
css/styles.css