html - How to style a table in CSS for mobile phones -



html - How to style a table in CSS for mobile phones -

i want re-style table formatted in mobile phones. have made dummy illustration explain problem new styles applied (the original table much bigger):

<table> <thead><tr> <th>firstname</th> <th>lastname</th> <th>savings</th> </tr></thead> <tr> <td>peter</td> <td>griffin</td> <td>$100</td> </tr> <tr> <td>lois</td> <td>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> <td>$150</td> </tr> </table>

and styles this:

/*mobile style*/ table, thead, tbody, tr, th, td { display: block; } table { margin: 0.5em auto 1em; font-size:90%; } td { border: 1.5px groove; text-align:center; } thead{ display: none; } tr { margin-top: 0.5em; border: 1.5px groove; } td:before { float: left; width: 6em; border: 1.5px groove; font-weight:bold; } td:before {content: "firstname";} td+td:before {content: "lastname";} td+td+td:before {content: "savings";}

jsfiddle

the result looks fine, if info in 1 field larger line, content overflows cell:

how can adjust content cell , enlarge 'lastname' cell in case?

edit:

i think wasn't clear plenty wanted achieve, here is:

you can utilize word wrap maintain info within cell

html css css3

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more