For 2 dynamically generated TD

justaguy

unread,

Sep 16, 2016, 9:58:38 PM9/16/16

to

How to set the first TD left aligned and
the second TD left aligned to the first TD?

Thanks.

Evertjan.

unread,

Sep 17, 2016, 4:52:41 AM9/17/16

to

justaguy <lichun...@gmail.com> wrote on 17 Sep 2016 in
comp.lang.javascript:

> How to set the first TD left aligned and
> the second TD left aligned to the first TD?

'left aligned', imho,
is an internal effect of text [and other inline elements]
in a container, like in a <td>.

You better give a minimalisitc working example.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

justaguy

unread,

Sep 17, 2016, 7:46:02 AM9/17/16

to

Ok, here's the code.

// creating row and creating all cells
// creates a table row
var newrow = document.createElement("tr");
newrow.setAttribute('style','td {padding: 10px}');

// cell 1
var cell = document.createElement("td");
cell.colSpan = "2";
// cell.setAttribute('style','padding: 10px');
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'fLabel';
cellText.name = 'fLabel';
cellText.size = "20";
cell.appendChild(cellText);
newrow.appendChild(cell);

// cell 2
var cell = document.createElement("td");
cell.colSpan = "3";
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'fValue';
cellText.name = 'fValue';
cellText.size = "80";
cell.appendChild(cellText);
newrow.appendChild(cell);

// code to append the new TR to table
// ...

Additionally, the page is complex, it has tons of other stuff, tons of dynamically generated elements before and after. thanks

On Saturday, September 17, 2016 at 4:52:41 AM UTC-4, Evertjan. wrote:
> justaguy <.com> wrote on 17 Sep 2016 in

justaguy

unread,

Sep 17, 2016, 7:48:17 AM9/17/16

to

I also added some fake hidden TDs after the second TD in attempt to "sqeeze" the first two TDs closer but to no avail.

Evertjan.

unread,

Sep 17, 2016, 7:57:31 AM9/17/16

to

justaguy <lichun...@gmail.com> wrote on 17 Sep 2016 in
comp.lang.javascript:

> Ok, here's the code.

Showing the dynamic code is not minimalistic
and does not explain [to me] what you mean by

">> > the second TD left aligned to the first TD?"

I would suggest you show a minimalistic **html** example of this,
perhaps from the F12 rendering?

>
> // creating row and creating all cells
> // creates a table row
> var newrow = document.createElement("tr");
> newrow.setAttribute('style','td {padding: 10px}');

This seems strange, btw, wouldn't that result in

<tr style='td {padding: 10px}'>

which seems not the way of inline CSS.

> // cell 1
> var cell = document.createElement("td");

Is this a repeating var declaration?

> cell.colSpan = "2";
> // cell.setAttribute('style','padding: 10px');
> var cellText = document.createElement('input');
> cellText.type = 'text';
> cellText.id = 'fLabel';
> cellText.name = 'fLabel';
> cellText.size = "20";
> cell.appendChild(cellText);
> newrow.appendChild(cell);
>
> // cell 2
> var cell = document.createElement("td");

It seems it is.

Evertjan.

unread,

Sep 17, 2016, 8:04:05 AM9/17/16

to

justaguy <lichun...@gmail.com> wrote on 17 Sep 2016 in
comp.lang.javascript:

> I also added some fake hidden TDs after the second TD in attempt to
> "sqeeze" the first two TDs closer but to no avail.

What is a "fake hidden TD"???

A <table> sizes a column to the widest <td> in it.

If you want smaller <td>'s you should use colspan='...'
for the wider <td>s in that column.

This becomes off-topic for this NG,
as it has nothing to do with Javascript.

justaguy

unread,

Sep 17, 2016, 9:04:55 AM9/17/16

to

ahe, it's the TD Alignment with other TDs problem, resolved. I appreciate your help.

On Saturday, September 17, 2016 at 8:04:05 AM UTC-4, Evertjan. wrote:
> justaguy <mail.com> wrote on 17 Sep 2016 in

Dr J R Stockton

unread,

Sep 18, 2016, 6:46:20 PM9/18/16

to

In comp.lang.javascript message <XnsA6866E9...@194.109.6.166>,
Sat, 17 Sep 2016 10:52:18, Evertjan. <exxjxw.h...@inter.nl.net>
posted:

>
>You better give a minimalisitc working example.
>

But a working example is, be definition, working, in which case no
problem remains. What is needed is a clear description in standard
English (or any other well-known ASCII-compatible language) of exactly
what result is wished for - and if possible a minimal complete Web-type
page of the best non-working version.

--
(c) John Stockton, Surrey, UK. 拯merlyn.demon.co.uk Turnpike v6.05 MIME.
Merlyn Web Site < > - FAQish topics, acronyms, & links.

Evertjan.

unread,

Sep 19, 2016, 4:26:59 AM9/19/16

to

Dr J R Stockton <repl...@merlyn.demon.co.uk.invalid> wrote on 18 Sep 2016
in comp.lang.javascript:

> In comp.lang.javascript message <XnsA6866E9...@194.109.6.166>,
> Sat, 17 Sep 2016 10:52:18, Evertjan. <exxjxw.h...@inter.nl.net>
> posted:
>
>>
>>You better give a minimalisitc working example.
>>
>
> But a working example is, be definition, working, in which case no
> problem remains. What is needed is a clear description in standard
> English (or any other well-known ASCII-compatible language) of exactly
> what result is wished for - and if possible a minimal complete Web-type
> page of the best non-working version.

I don't agree here, John, as the specification:

>> How to set the first TD left aligned and
>> the second TD left aligned to the first TD?

... can quite possibly be explained by a minimalistic example,
where the "working" includes the imperfections as compared
to the ultimate wish.

The OP was quite content however,
when I suggested the use of colspan='...'.