/    Sign up×
Community /Pin to ProfileBookmark

i want to divide <table> into 8 columns

Copy linkTweet thisAlerts:
Oct 03.2007

i want to divide <table> into 8 columns ( i.e <td>’s ) equally spaced,so that the table spans the whole screen ….i dont want scrollbar.

how its done ?

i believe , total screen width =100% ..right ?

<td width=”12%”>nhgjg</td>
<td width=”12%”>fghfh</td>
<td width=”12%”>fghfgh</td>
…………………….
<td width=”12%”>fghfgh</td> //8th table .

technically , i want <td> no 5 and <td> no 7 bit more wider than other tds ….is it possible ?

However, i dont want any scorollbar to come up if there are longer texts in any <td>

how to do it ?

to post a comment
HTML

20 Comments(s) ↴

Copy linkTweet thisAlerts:
@DARTHTAMPONOct 03.2007 — how about

<table width=100%>

<tr>

<td width=12%>

<td width=13%

<td width=12%>

<td width=13%

.....

.....

<tr>

chancea are you will never notice the difference

or if they have to be exact

<table width=96%>

<tr>

<td width=12%>

<td width=12%

<td width=12%>

<td width=12%

.....

.....

<tr>
Copy linkTweet thisAlerts:
@sun_riseauthorOct 03.2007 — i already have a 100% as table width.

currently i have code somewhat like this...

<i>
</i>&lt;table id="table1" width="100%" align="center" cellpadding="0" cellspacing="0" onMouseOver="setTableName(id)" border="1" bordercolor="#000000"&gt;
&lt;tr &gt;
&lt;td width="160" class="borderRight" height="19"&gt;data1&lt;/td&gt;
&lt;td width="185" class="borderRight" &gt;data2&lt;/td&gt;
&lt;td width="160" class="borderRight"&gt;data3&lt;/td&gt;
&lt;td width="160" class="borderRight"&gt;data4&lt;/td&gt;
&lt;td width="275" class="borderRight"&gt;data5&lt;/td&gt;
&lt;td width="160" class="borderRight"&gt;data6&lt;/td&gt;
&lt;td width="160" class="borderRight"&gt;data7&lt;/td&gt;
&lt;td width="160" class="borderRight"&gt;data8&lt;/td&gt;

<i> </i> &lt;/tr&gt;





do i need to modify it ? what should i write ?

i just gave you relevant code snippet to understand how my table is structured .

please advice

thanks
Copy linkTweet thisAlerts:
@sun_riseauthorOct 03.2007 — DARTHTAMPON ,

i believe i need to use % in the td's width.

and all the sum of td's width is should be added to 100% ...right ?
Copy linkTweet thisAlerts:
@DARTHTAMPONOct 03.2007 — change your td widths to percentages as well. no need to use absolute numbers
Copy linkTweet thisAlerts:
@DARTHTAMPONOct 03.2007 — DARTHTAMPON ,

i believe i need to use % in the td's width.

and all the sum of td's width is should be added to 100% ...right ?[/QUOTE]

yes except they have to be whole numbers so if you drop your table size down to 96 you wont have any issues with making them all 12. if you keep 100 you can alternate between 12 and 13 and probably no one will know the difference.
Copy linkTweet thisAlerts:
@sun_riseauthorOct 03.2007 — ok.

i have decided 6 td's with 10% width each.

2 td's with 20% each

so, 6*10 +2*20 =100

I think ,10% and 20% will now make a bit difference .

i'll check this...and let you know.
Copy linkTweet thisAlerts:
@sun_riseauthorOct 03.2007 — damn!.....its not working.

i have seen the [I]view source[/I] ...they are set to 10% and 20% and sum is 100% ...but still i am getting scrollbar !!!

it did not work.

can someone, please post a demo code .

i would like to implement that.
Copy linkTweet thisAlerts:
@sun_riseauthorOct 03.2007 — is this a wrong process ?

someone please advice
Copy linkTweet thisAlerts:
@harumphOct 03.2007 — What are you putting in the cells? images, long words? These cells will automatically stretch if they have to to accomodate things.

btw, I've used this and it has worked: 12.5%
Copy linkTweet thisAlerts:
@sun_riseauthorOct 03.2007 — harumph,

yes...i am putting long words in cells .

in fact those long words are coming into the page dynamically.

and as a result the columns are getting stretched and a scrollbar is coming up.


see, i have made a small example here.

i have divided the 100% in 4 columns, each 25%.

<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt; New Document &lt;/TITLE&gt;
&lt;META NAME="Generator" CONTENT="EditPlus"&gt;
&lt;META NAME="Author" CONTENT=""&gt;
&lt;META NAME="Keywords" CONTENT=""&gt;
&lt;META NAME="Description" CONTENT=""&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;
&lt;table width="100%" border="1"&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Heregdgdgdhffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Left Nav Links Here&lt;/td&gt;
&lt;td valign="top" width="25%"&gt;Body Here&lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;



Now purposefully, i have put a long word in one of the cell , and i see the columns got stretched and scrollbar comes up.


So, how do we come around this problem ?

it looks bad....i want the column of fixed width . ....so if there is a long word coming dynamically then it should come into thenext line ...i.e i want it wrapped.

How do we do it ?

thanks
Copy linkTweet thisAlerts:
@harumphOct 03.2007 — How are you populating these cells? With variables, correct? What are you using; PHP, ASP, JSP? You might be able to adjust your data before it hits the cells.
Copy linkTweet thisAlerts:
@WebnerdOct 04.2007 — You can also just do:

<i>
</i>&lt;table border="1" width="100%" cols="8"&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;td&gt;6&lt;/td&gt;
&lt;td&gt;7&lt;/td&gt;
&lt;td&gt;8&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

Copy linkTweet thisAlerts:
@harumphOct 04.2007 — Webnerd, I think his prob is that he has long strings that get populated dynamically within the cells and it automatically stretches the cell (see his last post).

My suggestion was to [possibly] adjust the data before it hits the cell, perhaps throwing in a n or <br> into the string at a certain character count.

Something like that.
Copy linkTweet thisAlerts:
@WebnerdOct 04.2007 — No way around it then. In order for CSS to perform a hyphenation of a sort, you need a dictionary. We have the same issues with XSL:FO when generating hard copies of documents. You can always just hide the overflow:

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;title&gt; new document &lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;

&lt;style type="text/css" media="all"&gt;
/*&lt;![CDATA[*/

td div.data{overflow:hidden;}

/*]]&gt;*/
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
//]]&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body lang="en"&gt;

&lt;table border="1" width="100%" cols="8"&gt;
&lt;tr&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy linkTweet thisAlerts:
@WebnerdOct 04.2007 — Here is a neat solution:
<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;title&gt; new document &lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;

&lt;style type="text/css" media="all"&gt;
/*&lt;![CDATA[*/

td div.data{overflow:hidden;}

/*]]&gt;*/
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
//&lt;![CDATA[

window.onload=function(){
var coll=document.getElementsByTagName('div');
for(i=0;i&lt;coll.length;i++){
if(coll[i].className=='data'){
coll[i].attachEvent ? coll[i].attachEvent('onmouseover',showOverflow) : coll[i].addEventListener('mouseover',showOverflow,false);
}
}
}

<i> </i>function findPosX(obj)
<i> </i> {
<i> </i> var curleft = 0;
<i> </i> if(obj.offsetParent)
<i> </i> while(1)
<i> </i> {
<i> </i> curleft += obj.offsetLeft;
<i> </i> if(!obj.offsetParent)
<i> </i> break;
<i> </i> obj = obj.offsetParent;
<i> </i> }
<i> </i> else if(obj.x)
<i> </i> curleft += obj.x;
<i> </i> return curleft;
<i> </i> }

<i> </i> function findPosY(obj)
<i> </i> {
<i> </i> var curtop = 0;
<i> </i> if(obj.offsetParent)
<i> </i> while(1)
<i> </i> {
<i> </i> curtop += obj.offsetTop;
<i> </i> if(!obj.offsetParent)
<i> </i> break;
<i> </i> obj = obj.offsetParent;
<i> </i> }
<i> </i> else if(obj.y)
<i> </i> curtop += obj.y;
<i> </i> return curtop;
<i> </i> }

<i> </i>function showOverflow(e){
<i> </i> var target=e ? e.target : window.event.srcElement;
<i> </i> var width=target.offsetWidth;
<i> </i> var height=target.offsetHeight;
<i> </i> var content=target.innerHTML;

<i> </i> var d=document.createElement('div');
<i> </i> d.style.position='absolute';
<i> </i> d.style.top=findPosY(target)+'px';
<i> </i> d.style.left=findPosX(target)+'px';
<i> </i> d.style.height=height+'px';
<i> </i> d.style.border='1px solid #000';
<i> </i> d.style.backgroundColor='#FFFFEB';
<i> </i> d.innerHTML=content;
<i> </i> document.body.appendChild(d);
<i> </i> d.attachEvent ? d.attachEvent('onmouseout',function(){this.parentNode.removeChild(this)}) : d.addEventListener('mouseout',function(){this.parentNode.removeChild(this)},false);

<i> </i>}

//]]&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body lang="en"&gt;

&lt;table border="1" width="100%" cols="8"&gt;
&lt;tr&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;td width="12.5%"&gt;&lt;div class="data"&gt;sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;



Mouse over each <td> for the full data
Copy linkTweet thisAlerts:
@harumphOct 04.2007 — Yup. There are scripts that will break at spaces or character counts, but you could break at wrong places without a dictionary as Webnerd says.

Can this data be broken without reading issues?
Copy linkTweet thisAlerts:
@sun_riseauthorOct 05.2007 — yea

harumph


you are right .

its a JSP page ...data are created dynamically and coming from DB .

i'll check suggestion of Webnerd and will revert back
Copy linkTweet thisAlerts:
@harumphOct 05.2007 — By the way, Webnerd. This script does not work properly in IE, but works great in FF.
Copy linkTweet thisAlerts:
@WebnerdOct 05.2007 — 
This script does not work properly in IE
[/quote]

Great, I really appreciate you trying to find out why it doesn't work IE instead of just informing me. The only way that IE will work is if there are fixed widths on the columns.

And:

<i>
</i>
var target=e ? e.target : window.event.srcElement;

change to

var target=window.event ? window.event.srcElement : e.target;


and

<i>
</i>
d.attachEvent ? d.attachEvent('onmouseout',function(){this.parentNode.removeChild(this)}) : d.addEventListener('mouseout',function(){this.parentNode.removeChild(this)},false);


change to


d.attachEvent ? d.attachEvent('onmouseout',function(){window.event.srcElement.parentNode.removeChild(window.event.srcElement)}) : d.addEventListener('mouseout',function(){this.parentNode.removeChild(this)},false);

Copy linkTweet thisAlerts:
@harumphOct 05.2007 — Sorry. Didn't have time to troubleshoot your code. It was more of an information-based response. No reflection on your coding prowess. I just didn't want Sun rise to plug it in and start getting errors. Next time, I can bite my tongue if I don't have time.
×

Success!

Help @sun_rise spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...