Responsive UI based on tables

Question

I have 7 tables of the week. Every table define a day in the week. I want to minimize it and use the website in the smartphone, and when I minimize it the tables go wrong:

How do I fix it?

.table{
    	width:14.286%;
    	background-color:white;
    }

<table style="background-color: white;" class="table table-borderedtable-striped">
  <tr>
    <th>Sunday</th>
  </tr>
  <tr ng-repeat="settingtime in settingtimes | orderBy:'time'|filter:by_shiftDay" ng-if="settingtime.shiftDay=='SUNDAY'">
    <td>
      <center>
        <div class="SettingTime">
          {{settingtime.time}}
        </div>
	      <div class="Shift" ng-repeat="sidor in nextsidor | orderBy:'id'" ng-if="sidor.shiftTime==settingtime.id">
	      <i style="color:red;float: right; margin-right: 10px; margin-top:10px;" ui-sref="nextsidoradmin" ng-click="RemoveShift(sidor.id)" class="material-icons">delete</i>
	        {{sidor.workerName}} </br>
	        {{sidor.roleName}} </br>
	      </div>
        </br>
        <button ng-hide="TheWorker2.id==undefined" class="btn btn-primary" ui-sref="nextsidoradmin" ng-click="CreateShift(TheWorker2.id,settingtime.id)">Create Shift</button>
      </center>
    </td>
  </tr>
</table>

Answer 1

Using CSS Grids would be the best approach to this UI implementation.

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Check the Complete guide to Grids for implementaion details

Simple CSS Grid Example :

* {  box-sizing: border-box; }

img {  max-width: 100%; } 

.card-container {
    display: grid;
    padding: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 1rem;
}

.card {
    display: grid;
    background-color: red;
    padding:5px;
}

<section class="card-container">
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
</section>

Answer 2

HTML Tables have earned their bad rep due to the abuse back in the day for layout purposes.

The typical solution with div's and css does have it's own share of possible pitfalls just as well.

This doesn't mean that you should never use a table: things that are table data really should modelled as a html table.

Regardless, to make a good (responsive) website, the trick is double:

• start with what the data is. That how you code it in html

• start with how you want to look it on the smallest of screens, and move up to larger widths to cnosider how to make it react : that's how you code the CSS

So in the end: the first question is how you want to have a calendar look on a small screen.

You can control how things look. Even if you code things in <p>s and <span>s, you can still render it like a table, that's what CSS can do for you. That's what thing like display: table-cell and the like will help you with.

To make the CSS react to the width of the screen, there's "media queries" to help you.

FWIW: inline CSS is frowned upon in general, it'll work against you.

But again the first step is simple: how do you want it to look like on a small screen.