Training/Registration html code

#1

Does anyone have a training registration html code similar to this one, https://awesome-table.com/-L7egLSfkCF-Lvngunw1/view? I really like this table from Awesome Tables. However, this table is slow to load and isn't responsive in that it doesn't go vertical when viewed from a mobile device. Thanks.

#2

It would be a really good exercise to take the html of that example table and figure out (with the help of people here) how to speed up the load time and how to make it responsive. You could start off by posting the basic html for that table.

#3

Thanks for your response. Before creating this post, I received a reply email from Awesome Tables who stated that this Training template cannot be responsive in that way. That is why I am searching for a different option.

#4

All I'm seeing at that link is

This Awesome Table view does not exist, was deleted, or contains incorrect settings.

You'll need to explain what it is you want.

#5

I'm not sure what the problem is. It comes up for me, https://awesome-table.com/-L7egLSfkCF-Lvngunw1/view.

#6

OK - it's working now. Must have been a temporary glitch.

The table is responsive up to a point; it's probably OK on an iPad, but not on a mobile. However, I understood from your other thread that you already have code for a responsive table, so can you not adapt that to your needs?

#7

Thank you for your response. I tried creating my own training by using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive. However, the code continues to render horizontally with scroll bars when viewed from a Smartphone. I don't think this will work.

#8

Despite the heading "Responsive Table" that example is not responsive!

#9

It does exactly what the example says it does:-

If you have a table that is too wide, you can add a container element with overflow-x:auto around the table, and it will display a horizontal scroll bar when needed.

It adds a scroller to the table container, not the page.

#10

So what is it that you are wanting to achieve, and what code do you have so far?

It sounds to me as if you are asking (again) how to create a responsive table. We really need more information in order to offer constructive suggestions. How many columns / rows will your table contain? What data do your cells contain? (Single words, long sentences, images?) How should the table behave at smaller screen sizes?

Show us what you have so far, even if it's only a rough mock-up, and explain what result you want, and what help you need in achieving it.

#11

What I am looking for is a table that displays content horizontally when viewed from a desktop/laptop and viewed vertically from a mobile device. So far, I have found no way of doing this.

#12

How do you envision users viewing a horizontal table displayed vertically, by tilting their heads 90 degrees? :wink:

If you have a wide table in a narrow viewport, there are a few choices.

  • horizontal scrollbars
  • resize smaller to fit (zooming in will reintroduce the need to scroll)
  • remove or abbreviate cell content until it fits
  • break the table into small tables that will fit the viewport (may result in needing vertical scroll)

None may be ideal, but it's unavoidable. If something doesn't fit, it doesn't fit.

#13

This is what I am looking for: https://codepen.io/AllThingsSmitty/pen/MyqmdM. This table appears to be responsive as it displays horizontally on a laptop and vertically when the screen size is reduced. My question is how can I combine both the html and css to make this work? I have a New Google Site which can embed the entire code once combined. I tried combining them both but it isn't working for me.

#14

Notice how the <td>s have data-label attributes that have the value of their corresponding <th> content?

The example is using CSS (in particular the pseudo-element ::before content value) to do what I called "break the table into smaller tables. IMHO a very clever solution that AFAIK should work in modern browsers.

It should as long as you meticulously make sure every <td> has an appropriate data-label, you determine an appropriate break point for the media query, and use the same CSS as in the example.

#15

It will work back to IE9 with a couple of little fixes. I've been using this for years now :slight_smile:

#16

Can you please elaborate? My knowledge of coding is very limited. The codes as is do not appear to work when I either insert the css or the html before the other.

#17

At the moment I can't think of how to better elaborate than I did. "does not work" isn't very helpful. Did you validate the HTML? https://validator.w3.org

#18

Do you have something else on that page which is conflicting with those rules?

I'm afraid I'm not familiar with New Google Sites, so I don't understand what you mean by this. Can you show us the exact HTML and CSS which you are using on your page?

#19

Are you saying that this code in combination should work as is or else there is something wrong with the codes? If so, do you have any suggestions of other tables that are responsive in this way? I merely was using this link as an example of what I am looking for. But if this code in combination doesn't work, I need to look at one that works, not try to fix this one.

#20

I'm not sure what you mean by "in combination". If you are trying to copy-paste randomly found code into your own as though it were a "plugin" unfortunately it almost never works that way. You have to know what your code does, understand what the other code does, and then modify your code to use the same approach as the other code.