Day: December 1, 2020

Posted on

How to solve this? I got same answer

558fe5180e0e8fc922d31c23ef84d240 
#include <iostream>


using namespace std;

int main ()

    int charge, aftercharge, parking_hours;

     cout << "please put your parking hours:    " ;
     cin >> parking_hours;

     if (parking_hours>=1)
     {
        charge = 1 ;
     }
     else if (parking_hours>=11)
    {
        charge = 2.50 ;
    }
     else if (parking_hours>=12)
     {
        charge = 6.00 ;

     }
     aftercharge = parking_hours*charge ;

     cout << "your bills RM" << aftercharge;
     cout << "this is your charge RM: " << parking_hours;

return 0;
Posted on

Under-Engineered Responsive Tables

Category Image 052

I first blogged about responsive data tables in 2011. When responsive web design was first becoming a thing, there were little hurdles like data tables that had to be jumped. The nature of <table> elements are that they have something a minimum width depending on the content they contain and that can easily exceed the width of a small screen device.

This image I made then still covers the issue pretty well:

Except… maybe they don’t equally suck. If that image on the left were scrollable, then maybe that’s actually… not so bad. In fact, that’s what I’ve done right here on CSS-Tricks recently. I think it’s the safest way of handling responsive tables when you have no idea what content the table contains. That’s the case here, where I need to set up base table styles that apply to any blog post which may contain a table.

The crux of the idea of a scrollable table is to wrap it in a <div> that has overflow: auto; on it. That way the <table> inside is free to exceed the width of the parent, but it won’t “blow out the width” and instead triggers a scrollbar. This isn’t quite enough though, so here’s Adrian Roselli with the real scoop. The wrapping <div> needs to be focusable and labelled, so:

<div role="region" aria-labelledby="Caption01" tabindex="0">
  <table>
    <caption id="Caption01">Appropriate caption</caption>
    <!-- ...  -->
  </table>
</div>

Then apply the scrolling and focus styles, in the condition you’ve done everything else right:

[role="region"][aria-labelledby][tabindex] {
  overflow: auto;
}

[role="region"][aria-labelledby][tabindex]:focus {
  outline: .1em solid rgba(0,0,0,.1);
}

If you’re going to further engineer responsive tables, there are all sorts of options. One of the classics is to display: block a lot of the elements, meaning that all the data in a row (<tr>) ends up as a chunk of stacked content together that stands less of a chance of breaking the parent element’s width. You can get all the data labels properly with pseudo-elements. But, this only makes sense when individual rows of content make perfect sense alone. That’s not the case with every table. A table’s purpose might be cross-referencing data, and in that case, you’ve ruined that with this approach. So again, there are nice approaches for responsive tables when you know exactly the content and purpose of the table. But the best responsive solution when you don’t know is to just make sure they are swipeable.

Direct Link to Article — Permalink

The post Under-Engineered Responsive Tables appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.