Home > database >  issue with CSS setting an HTML table width
issue with CSS setting an HTML table width

Time:05-08

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" >
Can someone help with the CSS file please.

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
  • Related