How to create flex responsive table?

-

Flex table:

For a long time, I've been looking for a really  easy way to handle tables in responsive on browser. Some technique's will make the responsive for lots of screen sizes, not just desktop vs. mobile. Having found now, I have done my own "flex responsive table" using CSS3 Flexbox, and here it is.

DEMO:

S/no

Manufacturing Process

Test/Inspect Qty

Fail Qty

Fail Rate

Serial Number

Product Build Date

Product Ship Date

Process one

23432

2986

298349823

029834

298y342y9834yy234

12/04/2018

320/07/2018

HTML/CSS: 

Comments

  1. UnknownJuly 28, 2018 at 7:57 PM

    Which is useful to create flex responsive table thanks.

    ReplyDelete

Post a Comment

Popular posts from this blog

Module Bundel

-
package.,json {    "name" :  " moduletutorial " ,    "version" :  " 1.0.0 " ,    "description" :  " creating module " ,    "main" :  " dom.js " ,    "scripts" : {      "test" :  " echo  \" Error: no test specified \"  && exit 1 " ,      "start" :  " webpack "   },    "author" :  "" ,    "license" :  " ISC " ,    "dependencies" : {      "webpack" :  " ^4.39.3 " ,      "webpack-cli" :  " ^3.3.8 "   } } webpack.config.js var   path   =   require ( " path " ); module . exports   =  {     entry: ' ./app.js ' ,     output: {         path:  path . resolve (__dirname),         filename:  ' main.js '     },     mode:  ' development ' }
Read more

Power of async and Promise

-
///////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////// Async //////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////// // const promise = fetch('https://jsonplaceholder.typicode.com/todos') // promise // .then(res => res.json()) // .then(data => console.log(data)) // .catch(err => console.log(err)) const getBlogs = async ( name ) => { const fruits = { " one " : " One 1 " , " two " : " Two 2 " , " three " : " Three 3 " } await delay ( 2000 ); return Promise . resolve ( fruits [ name ]); } // for small const makeMe = async () => { try {
Read more