Jump to content

Setting Table column widths


rocky48
Go to solution Solved by rocky48,

Recommended Posts

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?

Link to comment
Share on other sites

  • Solution

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.

<th><div style="width:120px">Week #</div></th>

 

This now works!

Link to comment
Share on other sites

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 :)

Edited by Azercii
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.