Responsive Table

I Need Help
1

I need a feature to insert a Table - I have tried but limited code experience is a problem.
I can get a basic table to work - problem is I need about 10 columns so when it breaks it will not cut off at the right hand side.

This example ‘No More Tables’ (down the page) is really what I need as it breaks well and is easily read.

How would I do this in Blocs and

Is there any plan for something similar in the form of a Table Bric in the future for Blocs

2 Likes
2

I was longing for this feature too for so long… before I would do it to add it via HTML Bric. @Norm Please add this hehe :slight_smile:

1 Like
3

Wow. That’s great table.

4

Hi Guys

After a bit of experimenting and a lot of luck, I have got the table I need to work :grinning:

See my live example below with the actual data I need on there. I need pretty wide tables for a project and this fits the bill.

I was surprised how easy it was to do from an example - OK there is a lot of typing for the cell input - but thats tables!

I don’t know much about code and it could me messy - perhaps those who know can have a look.

Perhaps @Norm could have a look and think about an easier way to use in Blocs or perhaps add to the wish list.

Trev

http://www.trevormckay.co.uk/table/

1 Like
5

Oops! looks like I got something wrong.

Wonder can someone have a look at the code please. Table is fine on my desktop and responsive but placed to left and space to right on iPad portrait and landscape and Phone portrait - phone landscape looks ok.

Font not right on mobile devices - looks like standard times text - where is the correct place to to change the font in the table?

http://www.trevormckay.co.uk/table/

I checked the layout in Safari Responsive Design Mode and it all looks OK.

Sorry I am not great with Code - there is a reference in the code to width - if any help

Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.

If I could just get this cleaned up - i can back to my client and proceed!

Thanks in advance

Trevor

6

Please, is there any kind soul who can help me with this?

Trev

7

Has anyone used a responsive table or a stacking table that breaks to a list in Blocs?
(using the html widget)

I am struggling to get a table to work for a project in the pipeline. I can’t see any other way to present the information required.

Tables - added to the wish list.

Thanks

Trevor

9

Thank you for your reply.

I am not too good with code and its placement. Would it be possible for you to explain 1 stackable example as to how and where I place the code in Blocs. If I can get an example working I think I can expand on it.

Thanks

Trevor

10

@t50ufo:
Dito

11

Trev are you sure all that inline styling is supposed to be there? The lines with fixed body width do not seem to be in the original.

Simon

Edit found them in the downloaded files but I’m not sure what purpose they serve I’d delete

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	body { 
		padding: 0; 
		margin: 0; 
		width: 320px; }
	}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body { 
		width: 495px; 
	}
}

and re-test

12

Also you don’t have a call for google font “Arvo” in the head of your document if it’s working on your mac I guess you have the font installed because it doesn’t work on mine.

S

13

Hi Simon

Thanks for your help.

Removing that code has helped things big time:

http://www.trevormckay.co.uk/table/

Now:

Which piece of code changes the break to the list view from the full width view?

I would like the table cols to be visible on Tablet Landscape

and

What is the best way to style the table font.

I have a bloc class set to Avro but I see there is font reference in the style.css file

This is great progress!

Thanks

Trev

14

<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
Pasted into Page > Settings > Add Code > Head Code should sort out Arvo for you.

Simon

15

Or add it via the Font Manager:
https://help.blocsapp.com/fonts-manager/

16

@Blocs_User I suggested that way as he’s not using it anywhere but the table in his example and to include it in his Blocs file he’d need to additionally create a custom class (or assign it to a class he’s not using)

@t50ufo though if you are going to Use Arvo throughout the project follow @Blocs_User advice.

17

Thanks

Simon and Blocs_User

I had a go at this myself this morning:

I pasted

into to Edit Code panel and used id css file reference thus:

<title>Responsive Table</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">

<link rel="stylesheet" href="stylet.css">

seems to work fine!

Is this method OK?

www.trevormckay.co.uk/table

Thanks once again for your help.

18

Can you please post a link to your Blocs document? I would like to peer inside the document and see precisely how you implemented that table.

Thanks.

19

Well, since my previous post here fell on deaf ears (no reply for 17 days), I guess there must be some patented magic behind that magical table! :slight_smile:

Regardless, Blocs won’t be complete until it has a good WYSIWYG responsive table tool. My sites are filled with tables, and dumping in raw code into Blocs to get tables to work isn’t what I would call “fun.” Bring on the Table Tool! (Version 2.5?)

2 Likes
20

Well, it will probably never complete, like any other app :slight_smile:

But I totaly agree, with a proper table solution it would be MUCH more mature.

21

in version 9.2 perhaps. Be patient!