cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
heatherlbrown77
Community Participant

How can I make a table responsive without CSS?

Jump to solution

I have seen so many great tutorials about how to create a responsive table using CSS. However, our institution has CSS disabled. So, I am left with HTML and creativity. I have tried everything that I know. Does anyone know of a way to make a table responsive with just HTML or any other method other than CSS? 

I simply want to be able to have 5 buttons, evenly spaced, horizontally across the screen.

1 Solution

Accepted Solutions
heatherlbrown77
Community Participant

Here is what I am attempting to do. Right now I have image buttons in a standard table, which look cool but are not responsive at all. I would like to keep the same structure (evenly spaced, 4 columns and then the buttons in rows) but have it be responsive. I am willing to let go of the image buttons and use standard buttons.

Homepage buttons in a table.

View solution in original post

0 Kudos
20 Replies
themidiman
Community Champion

I'm not sure what you mean by having 'CSS disabled', but it's a fundamental feature of the browser to interpret CSS so if you can still use inline CSS, you might look into flexbox: CSS Flexbox (Flexible Box) . Put each button in a box and then style the outer container to occupy the entire width of the view.

We have CSS in Canvas set to Admin only. So, only admin have access to the code and can change it. 

So if your global CSS override is only available to your admin to change you can still do some work in the Canvas RCE with inline CSS styles. If you need some examples of this let me know and I'll see about getting one put together for you. 

Yes please! If you want you can use my work email instead of on here. hlbrown@nic.edu

themidiman
Community Champion

For the good of the community I wanted to point out that there is at least one other discussion about this here: Anchor a div? 

I worked out this example based on some of the things that I found there:

<div class="content-box">
    <div class="grid-row">
        <div class="col-md-2 col-md-offset-1"><a class="Button Button--primary" role="button" href="#" style="text-decoration: none;  display: block; text-align: center;
             color: #ffffff; font-weight: bold;margin: 10px auto"
>

           Button 1</a>
        </div>
        <div class="col-md-2"><a class="Button Button--primary" role="button" href="#" style="text-decoration: none;  display: block; text-align: center;
             color: #ffffff; font-weight: bold;margin: 10px auto"
>

            Button 2</a>
        </div>
        <div class="col-md-2"><a class="Button Button--primary" role="button" href="#" style="text-decoration: none;  display: block; text-align: center;
             color: #ffffff; font-weight: bold;margin: 10px auto"
>

           Button 3</a>
        </div>
        <div class="col-md-2"><a class="Button Button--primary" role="button" href="#" style="text-decoration: none;  display: block; text-align: center;
             color: #ffffff; font-weight: bold;margin: 10px auto"
>

            Button 4</a>
        </div>
        <div class="col-md-2"><a class="Button Button--primary" role="button" href="#" style="text-decoration: none;  display: block; text-align: center;
             color: #ffffff; font-weight: bold;margin: 10px auto"
>

             Button 5</a>
        </div>
    </div>
</div>

I hope that helps.

GideonWilliams
Community Champion

Would definitely second Jeff's comment about the Anchor a div?‌ post. Some excellent suggestions and actual examples all inspired by  @debra_mansperge ‌ initial question

sharon_kitching
Community Participant

Use percentage in table. Code as below; edit in the HTML view of the WYSIWYG editor. 

<table class="ic-Table ic-Table--hover-row ic-Table--striped" style="width: 80%;">
<tbody>
table with 80% will look like this:

Header 1Header 2
this is somethingthis is something else
another thingand some more things

Having said that - you want to use tables for layout, which is a bit of an accessibility no-no. I'm going with the flexbox solution. That will work fine, and you just add the code into your editor (you don't need css for it). In-line styles work fine.

mlabbett
Community Participant

This is pretty cool.  I assume you can do it with images just as easily.  The weird thing is it doesn't show as anything in the RTE.  It is just blank.  Are you experiencing that??

Mark

jdick1
Community Participant

That's because only the button text will render in the RCE and in this example, the text is white so it disappears into the background. If you change the color attribute value to something else (e.g. ffffff --> ffe180), you'll see the the five buttons in a vertical stack in the RCE. Once you click Save, it will render them in the five columns.

Here's another example that sets the background color of four flexbox columns that will render in the RCE. (Again, note that they'll show up in a vertical stack until you save the page.)

<div class="grid-row">
    <div class="col-xs-12 col-sm-3" style="background-color: #0058a0; ">
        <p> </p>
    </div>
   
    <div class="col-xs-12 col-sm-3" style="background-color: #fdb913; ">
        <p> </p>
    </div>
   
    <div class="col-xs-12 col-sm-3" style="background-color: #66addc; ">
        <p> </p>
    </div>
   
    <div class="col-xs-12 col-sm-3" style="background-color: #ffe180; ">
        <p> </p>
    </div>   
</div>