different column width in different table in html by javascript

Ask Question Forum:

Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page

Show

ASK RECENT

different column width in different table in html by javascript

Asked by duncanb7

at 2024-04-10 16:05:25

Point:500 Replies:9 POST_ID:828468USER_ID:11059

Topic:

JavaScript;;Hypertext Markup Language (HTML)

I just finish to extract csv data into two different location table by javascript with
getelementsByTagName("div")(k).
Now I would like to ask whether it is possible I can set different width of every column for different tables
If I use style table or td {} , it will update all column width globally, in other words, all column width is same
and fixed. If I go into for loop in javascript, it do update for each cell's width that will costs a lot of loop
time and huge if the table is 1000*20.

Any suggest for set different column width (for exmaple no of column is 20) by javascript or html or others ?
And table in table method and do update for each cell is final approach but I don't want to do so.

Second question how to set different table border if two tables in one html
Can I set like this
<style type="text/css">

table.[0]
{ border:3px}
table.[1]
{border:6px}
</sytle>

Please advise for two questions

Duncan

html><head><style type="text/css">table{//border-collapse:collapse;//border:1px solid black;}td{width:100px;text-align : center;}</style></head><body onload="test()" style="background-color:#e0ffff"><script>// http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26619334.htmlfunction getData( url ,k){  var request = new XMLHttpRequest();  request.onreadystatechange = function()  {    if ( request.readyState == 4 )    {      renderData( request.responseText,k );    }  }  request.open( "GET", url, true );  request.send( null );}function renderData( data ,k){var mybody= document.getElementsByTagName("div")[k];  var dataRows = data.split( "" );  var table2 = document.createElement("Table"); //table2.border = 1;  for( i = 0; i < 3; i++ )  {    var tableRow = table2.insertRow(i);    var dataCells = dataRows[i].split(",");    for( j = 0; j < dataCells.length; j++ )    {      var tableCell= tableRow.insertCell(j);      tableCell.innerHTML = dataCells[j];    }  }//document.write(document.getElementsByTagName("body")[0].nodeName); mybody.appendChild( table2 );}function test () {  getData("http://www.mydomian.com/book7.csv?r=1264",0 );    getData("http://www.mydomain.com/postcodes.csv?r=1264",1 );}</script><table><tr><td>start</td></tr></table><div id="mytable" ></div><table><tr><td>middle</td></tr></table><div></div><table><tr><td>1234</td></tr></table></body></html>

1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59:60:61:62:63:64:65:66:67:68:69:70:71:72:73:74:75:76:77:78:79:80:81:82:83:84:85:86:87:88:89:90:91:92:93:94:95:96:97:98:99:100:101:102:

Select All Code

Attachment:Book7.csvpostcodes.csv

Expert: Dave Baldwin replied at 2024-04-10 19:05:07

Glad you got it working and happy to help.

Author: duncanb7 replied at 2024-04-10 18:42:52

Thanks for your reply to
trigger the final answer

Author: duncanb7 replied at 2024-04-10 18:42:23

Just adding the following code to change individual column's width
var mytag=document.createElement("colgroup");
mytag.setAttribute("span", "1");
mytag.setAttribute("width", "500");
table2.appendChild(mytag );

So both question is sovled in FIrefox

Expert: Dave Baldwin replied at 2024-04-10 18:07:58

Oh, good. I don't know, I never create tables with javascript, especially setting the attributes.

Author: duncanb7 replied at 2024-04-10 17:49:09

Yes, your right, I can set different border after adding
table2.setAttribute("class", "one"+k); in javascript code above
It solved the second question.

Any idea for first question ?

Author: duncanb7 replied at 2024-04-10 17:25:16

I try

table2.classname="one";
or

mytable.classname="one";

that is no different at all

Please advise

Author: duncanb7 replied at 2024-04-10 17:11:57

Is it

table2.classname=1;

in javascript code above

Author: duncanb7 replied at 2024-04-10 17:07:59

but how can I put class="one" inside <table> tag of table 1 by javascript ? It is possible

Accepted Solution

Expert: Dave Baldwin replied at 2024-04-10 16:46:34

500 points GOOD

This works but it only creates the outer border, not a border between cells. As far as cell width, you may want to let the width expand and contract with the data. I would add a little padding, at least left and right, to make the text more legible. This shows a couple of variations.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Untitled</title><style type="text/css">table.one{ border:3px solid black;}table.one td { width: 100px; padding:2px;}table.two{border:6px solid black;}table.two td { width: 130px; padding:2px;}</style></head><body><table class="one" cellpadding="0" cellspacing="0" summary=""><tr><td>The first</td><td>The 2nd</td></tr><tr><td>The first</td><td>The 2nd</td></tr></table>&nbsp;<table class="two" cellpadding="0" cellspacing="0" summary=""><tr><td>The first</td><td>The 2nd</td></tr><tr><td>The first</td><td>The 2nd</td></tr></table></body></html>

1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:

Select All Code

新聞財經娛樂♬資訊 News Economy

About Us|Service|Pricing

Stock Index全球即時指數期貨:

&nbps;

News即時新聞:↓

News即時新聞:↑

On Balance Volume (OBV):

Youtube Video♬ Sharing by members:↓

Youtube Video♬ Sharing by members:↑

Ask Question Forum:

different column width in different table in html by javascript

Your Information

Members/Profolio