Totara Learn Open Discussions

Table use in HTML Block

Welcome to this forum!

I raised this question in the Totara Theming webinar I attended when a table was used to display a 2-column layout: Does Totara capabilities automatically make the table values % base? Since tables are the most friendly when it comes to responsive design.

With that said, I decided to take a stab at building a 2-col layout with the default table functions within the html block.

Noticed a few odd things that would like to override (displayed in attachment):

Caption row gets added, you can't shut this off without using CSS to target
You can't control by default how large the columns are, depending how much content you have in the first column, it will determine where the content for 2nd column starts
As you can see, when the design responds, the content in each columns just shrinks down. By default there is not a way to control the stacking of those rows.

Permalink | Reply

Hi Lisa,

We frequently use tables in the community and academy to display our content. Here is an example of a simple 2 column table.

col 1

col 2

You can use this code in the HTML editor to create a similar table.

<div class="container-fluid">

<div class="row">

<div class="col-sm-6">col 1</div>

<div class="col-sm-6">col 2</div>

</div>

To change the width of each column, you can adjust the numbers after 'col-sm-'. The numbers in a row should add up to 12.

Permalink | Show parent | Reply

Thanks for the reply Jordan.

I've used the method you've shared successfully which is utilizing the grid system.

The test I was running was directly with using html table elements, and was seeing if I could leverage the default Totara tools instead of implementing more advanced HTML code.

Permalink | Show parent | Reply