best way to change width of table row created with php/mysql?

Question

I have a table that displays calendar dates retrieved from a mysql database with php. Each row represents a month, and each td is a date in that month. There will be max three visible dates in each row, after which they will be hidden, to be viewed with a js carousel:

          |---------visible area---------|----hidden area----|           

tr (OCT): |    td        td        td    |
tr (NOV): |    td        td        td    |    td        td
tr (DEC): |    td        td              |

I need a way to set the width of each tr after it is populated by tds. If each td is 20rem, the top row would be 60rem, middle 100rem, and bottom 40rem. I have tried echoing javascript with php, but it hasn't worked:

echo '<script>$("#' . $monthWord . '").css("width","' . ($numDates * 20) . 'rem");</script>';

What do you suggest? Thanks for any help.

Is there any reason why you can't just use classes instead of ids and set this in your CSS from the start? Then if there are variations, you can assign elements the classes when you generate the page. — Evan
– Evan, Commented Oct 29, 2013 at 1:18
Classes would be fine, but it still involves an unpredictable number of items in each row... I don't know how many until they are retrieved from the database. — Thomas
– Thomas, Commented Oct 29, 2013 at 1:22

Rainer Plumer · Accepted Answer · 2013-10-29 01:26:06Z

2

I dont think you can set different widths to different rows like that, in the end, the table and all the rows will have the same width as required by the widest row, or the width set in table style attribute.

instead you should create the table with all the rows, and then hide the part of the table, that you dont want to be seen, using overflow:hidden on fixed size parent container. And then move the table relatively left or right using javascript.

answered Oct 29, 2013 at 1:26

Rainer Plumer

3,7533 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Over a year ago

Ah ok... I will have to use divs then instead of a table, because I need each row to slide individually.

Community · Accepted Answer · 2023-11-20 22:45:59Z

0

Based on your comments, since you know the number of items in each row once you retrieve them from the database, you should create appropriate CSS classes and assign them when you generate the page. For instance, if you had an incoming row, and you checked the count of the row array (or however else you want to find out how many dates there are), you cycle through the first three dates and assign them the visible class. Then, for the next two, just assign them the "hide until shown" class.

edited Nov 20, 2023 at 22:45

CommunityBot

11 silver badge

answered Oct 29, 2013 at 1:27

Evan

8254 silver badges14 bronze badges

1 Comment

Thomas Over a year ago

The idea is that the hidden data cells will not be visible because of overflow:hidden, as mentioned by Rainer above. Then the row will be moved left or right with javascript. Thanks for your idea though.

Collectives™ on Stack Overflow

best way to change width of table row created with php/mysql?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related