Setting Table column widths

rocky48 · June 23, 2014

I am trying to set the column widths in my HTML 5 script, but what ever I do the widths stay the same?

I found that the <col width=""> tag does not work in HTML 5.

So I tried <th style="width:130px">Week #</th> and this did not work.

I have also created a special table div style #table1.

Nothing changes when I make these changes!

Here is the table part of my script:

<div id="table1">
	<table width="250%" cellspacing="1" border="1" BGCOLOR="white"> 
	

<tr>
<th style="width:130px">Week #</th>
    <th style="width:80px">18</th>
	<th style="width:80px">19</th>
	<th style="width:80px">20</th>
	<th style="width:80px">21</th>
	<th style="width:80px">22</th>
	<th style="width:80px">23</th>
	<th style="width:80px">24</th>
	<th style="width:80px">25</th>
	<th style="width:80px">26</th>	
</tr>
	<tr>
	<td>Visits</td>
	<td>300</td><td>346</td><td>266</td><td>216</td><td>339</td><td>288</td><td>231</td><td>213</td><td></td></tr>	
	<tr>
	<td>From</td>
	<td>28/04/2014</td><td>05/05/2014</td><td>12/05/2014</td><td>19/05/2014</td><td>26/05/2014</td><td>02/06/2014</td><td>09/06/2014</td><td>16/06/2014</td><td>23/06/2014</td>
	</tr>
	<tr>
	<td>To</td>
	<td>04/05/2014</td><td>11/05/2014</td><td>18/05/2014</td><td>25/05/2014</td><td>01/06/2014</td><td>08/06/2014</td><td>15/06/2014</td><td>22/06/2014</td><td>29/06/2014</td>
	</tr>
	<tr>
	<td>USA</td><td>161</td><td>158</td><td>148</td><td>79</td><td>132</td><td>105</td><td>81</td><td>70</td><td></td>
etc.........
</table>	
		</div>

here is my style.css script:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #F1F1F1 url(images/img01.gif) repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: black;
}
quote {
font-size:medium;
 }

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #023848;
 }


h1 {
	font-size: 4em;
    
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
font-size:large;
}
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}

a {
	text-decoration: none;
	color: #4486C7;
}
p {
font-size:large;
 }

a:hover {
}

#wrapper {
	width: 980px;
	margin: 0 auto;
	padding: 0;
}

/* Header */

#header {
	width: 980px;
	height: 280px;
	margin: 0 auto;
	padding: 0px;
	background: url(images/head!.png) no-repeat left top;
}

/* Logo */

#logo {
	float: right;
	margin: 0;
	padding: 0;
	
}

#logo h1, #logo p {
	margin: 0;
	padding: 10px;
   
}

#logo h1 {
	float: left;
	padding-top: 223px;
	letter-spacing: -1px;
	text-align: right;
	text-transform: capitalize;
	font-size: 3.8em;
    color: purple;
}

#logo p {
	float: left;
	margin: 0;
	padding: 250px 0 0 10px;
	font: normal 20px Arial, Helvetica, sans-serif;
	font-style: italic;
	 color: purple;
} 

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	 color: black;
}

/* Search */

#search {
	float: right;
	width: 280px;
	height: 60px;
	padding: 20px 0px 0px 0px;
	background: #E2E2E2;
	border-bottom: 4px solid #FFFFFF;
}

#search form {
	height: 41px;
	margin: 0;
	padding: 10px 0 0 20px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 170px;
	padding: 6px 5px 2px 5px;
	border: 1px solid #DEDEDE;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #5D781D;
}

#search-submit {
	width: 50px;
	height: 22px;
	border: none;
	background: #B9B9B9;
	color: #000000;
}

/* Menu */

#menu {
	width: 980px;
	height: 90px;
	margin: 0 auto;
	padding: 0;
}

#menu ul {
	margin: 0;
	padding: 50px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	width: 100px;
	height: 30px;
	margin-right: 1px;
	padding: 9px 0px 0px 0px;
	background: url(images/img02.gif) no-repeat left top;
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}

#menu .current_page_item a {
	padding-left: 0;
}

/* Page */

#page {
	width: 940px;
	margin: 0 auto;
	padding: 0px 0px 0px 40px;
	background: url(images/img03.gif) repeat-y left top;
}

#page-bgtop {
	padding: 20px 0px;
}

#page-bgbtm {
}

/* Content */

#content {
	float: left;
	width: 580px;
	padding: 30px 0px 0px 0px;
}

.post {
	background: url(images/img07.gif) no-repeat left 50px;
	margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
	height: 38px;
	margin-bottom: 10px;
	padding: 12px 0 0 0px;
	letter-spacing: -.5px;
	color: #000000;
}

.post .title a {
	color: #023848;
	border: none;
}

.post .meta {
	margin-bottom: 30px;
	padding: 5px 0px 15px 0px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
}

.post .meta .date {
	float: left;
}

.post .meta .posted {
	float: right;
}

.post .meta a {
}

.post .entry {
	background: url(images/img08.gif) no-repeat left top;
	padding: 0px 0px 20px 0px;
	padding-bottom: 20px;
	text-align: justify;
}

.links {
	padding-top: 20px;
	font-size: 12px;
	font-weight: bold;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 280px;
	margin: 0px;
	padding: 0px 20px 0px 0px;
	color: lightgray;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 30px;
}

#sidebar li li {
	line-height: 35px;
	border-bottom: 1px dashed #D1D1D1;
	margin: 0px 30px;
	border-left: none;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	height: 38px;
	padding-left: 30px;
	letter-spacing: -.5px;
	font-size: 1.8em;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 30px 20px 30px;
	text-align: justify;
}

#sidebar a {
	border: none;
}

#sidebar a:hover {
	text-decoration: underline;
	color: #8A8A8A;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}
#dtable {

font-size:small;
color:black;

 }
#dtable>h1 {
background: #F1F1F1;
 } 
#table {
font-size:small;
color:black;
text-align:center;
width:200px;
  }
#table1 {
font-size:small;
color:black;
text-align:center;
width:200px;
border: 1px solid black;
table-layout: fixed;
  }
th, td {
border: 1px solid black;
overflow:hidden;
width: 100px;
 }   
/* Footer */

#footer {
	height: 50px;
	margin: 0 auto;
	padding: 0px 0 15px 0;
	background: #ECECEC;
	border-top: 1px solid #DEDEDE;
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 20px;
	line-height: normal;
	font-size: 9px;
	text-transform: uppercase;
	text-align: center;
	color: #A0A0A0;
}

#footer a {
	color: #8A8A8A;
}

I am completely baffled as to why the widths of the columns does not change when I try to fix the widths. They are all the same size?

Please enlighten me where I am going wrong?

maxxd · June 23, 2014

Remove the width attribute in your table opening tag.

rocky48 · June 24, 2014

Did as you said but had no effect?

I researched the internet and one suggestion was to add <div> tag inside <th> and define width inside the <div> tag.

Viz.

This now works!

Azercii · June 25, 2014

In HTML 5 you can use <col> tag to style the width of each column.

<col style="width:35%">
<col style="width:40%">
<col style="width:25%">

Place it under your <table> tag. They all need to total 100%, so as you have 10 columns, that would make each <col> 10% width. For tidier code, I would go with the css route;

CSS:

table
{
    table-layout: fixed;
    width: 250%;
}

HTML:

<table cellspacing="1" border="1" BGCOLOR="white">
<tr>
<th>Week #</th>
    <th>18</th>
	<th>19</th>
	<th>20</th>
	<th>21</th>
	<th>22</th>
	<th>23</th>
	<th>24</th>
	<th>25</th>
	<th>26</th>	
</tr>
	<tr>
	<td>Visits</td>
	<td>300</td><td>346</td><td>266</td><td>216</td><td>339</td><td>288</td><td>231</td><td>213</td><td></td></tr>	
	<tr>
	<td>From</td>
	<td>28/04/2014</td><td>05/05/2014</td><td>12/05/2014</td><td>19/05/2014</td><td>26/05/2014</td><td>02/06/2014</td><td>09/06/2014</td><td>16/06/2014</td><td>23/06/2014</td>
	</tr>
	<tr>
	<td>To</td>
	<td>04/05/2014</td><td>11/05/2014</td><td>18/05/2014</td><td>25/05/2014</td><td>01/06/2014</td><td>08/06/2014</td><td>15/06/2014</td><td>22/06/2014</td><td>29/06/2014</td>
	</tr>
	<tr>
	<td>USA</td><td>161</td><td>158</td><td>148</td><td>79</td><td>132</td><td>105</td><td>81</td><td>70</td><td></td>
etc.........
</table>

UPDATE: http://jsfiddle.net/Hhg2x/

I know you've solved this, just thought I'd chime in and add a further suggestion in case others find the thread

Sign In

Setting Table column widths

Recommended Posts

rocky48

Link to comment

Share on other sites

maxxd

Link to comment

Share on other sites

rocky48

Link to comment

Share on other sites

Azercii

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information