How to display 20 rows table in the single page

HTML & CSS
1

I had a problem i having 20 rows in my database if going to retrieve the data to the table, i want to scroll the down slider to view the all data, what can do for without scrolling.

2

Would you mind restating the issue? I do not understand the second (last) sentence.

3

i mean my database table contains 20 rows if i retrieve the data from database to view page i want to scroll slider to the right side to view the full page. is there is any option to without scroll the slider.

4

Can someone else take this, please? I do not understand the issue.

sindiyenbalass, your English is confusing. In describing the table, you speak of 20 rows. One usually can be expected to scroll up and down to see 20 rows of data. How may columns does the table contain and how wide are these columns? That would affect side to side scrolling.

I do not know what slider you are talking about. A “slider” usually refers to a series of images that are displayed one after the other.

You say that you WANT to scroll the down slider or scroll slider to the right side. Then you ask “is there is any option to without scroll the slider?” That doesn’t make sense.

In any case, you would will need to present to the data so it can be viewed on most any size device (assuming a responsive site).

You may need to draw a picture showing what you have now and another picture showing your question… if what you are wondering about can be done.

5

Perhaps the OP means a table with fixed header and footer perhaps so that it stays on screen.

e.g.

Or similar perhaps?

4 Likes
6

Thanks for the reply…
sorry for my bad English and i am not briefed correctly, the problem is my table have 20 columns and if i retrieve the data from database to my view.php page , I will see the 14 columns data and the remaining are outside of the look .

if user want to see the full data they want to drag the mouse to horizontal to edit or delete.

so how can i fix the 20 column data table inside 1024x768 view.

7

Unfortunately we will be unable to help unless you can provide a demo of the problem as it sounds like your problem is specific to your layout.

Obviously if a table is too wide for its container then you will need to scroll to see it. It is unclear what you expect or want to happen?

2 Likes
8

As @PaulOB said, we will need to see the code for your page to troubleshoot this issue. We do not need to see any php code. Instead you can “show source” in your browser and save that code to a file or copy and paste it into your next post. The code MUST be able to demonstrate the issue. In other words, we need to be able to see in our browser what you see in yours. For that reason, a link to your test site might be best.

In addition to the HTML and CSS code, it might be helpful if you can also include (1) a screenshot showing how the data appears in your browser now and (2) a make-believe screenshot showing what you wish to see. You can use an image editor to create the make-believe screen shot.

EDIT: one more question, please…
Have you looked at the CodePen that PaulOB posted?
Please describe what you see in Paul’s example that does not fit your need and also what does fit your need.

You many want to ask a friend to help you with your English. :slight_smile:

2 Likes
9

Try using DataTables to manage the viewing of the data.

It will allow you to show rows and pages as well as connecting to different data types.

Hope this helps

10

I think he means his table is scrolling horizontally

11

Yes you are right, my rows gone out of my container because my form contains 17 textbox,
if i view in my view.php page its looks too wide how to fix the data without moving mouse to horizontal,
need any examples.

Thanks

12

Now I’m confused. Initially you were asking about a table, now you are asking about a form. :confused:

13

No it not like that , My page look like this

1288Ă—655 27.4 KB
1305Ă—539 40.5 KB

How to fix all ie R1 to R17 without drag the mouse.

14

You would get the best answers if you posted the html and css for the table. :slight_smile:

Reading all rejected answers above, could you try making the table fixed and page wide and tell us how that works for your table?
E.g.

table {
	table-layout:fixed;
	margin:auto;
	width:100%;
}
15

I think I understand what he means.

A table without scrolls that can fit all the data.

I think that even if it is made so, content can always take more place. If the windows is resized to take half the screen for example, then scrolls appear on the window and it should be so.

He has another problem since the data goes out of the borders of the table, without extending the table, probably due to hard-coded width.

I think he needs to restrict his requirement to have no scroll only to the full screen default size.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.