css - HTML scrollable table header and body alignment -



css - HTML scrollable table header and body alignment -

i've spent great deal of time , effort on toying , researching this, cannot figure out how align column headers scrollable table body in html. there other solutions , techniques posted on here , @ random places on web, yielded inconsistent results, random amounts of data.

here's jsfiddle.

note have custom css applied, bootstrap's css. please expand result panel big plenty html headers not wrap.

to summarize html, there 2 tables - 1 column headers, 1 info cells. each wrapped in <div>, allows cells scrollable , sets width of columns. business relationship scroll bar showing (the info dynamic , have no thought how much info there be), <div> wrapper around table cells set show scroll bar, , wrapper around table headers has css applied:

.grid-container .column-wrapper { width: calc(100% - 16px); /* 16px approximate width of scroll bar */ }

this works on monitor when zoom 100%, on other monitors, grid lines not aligned - off maybe 4px. application uses these grids uses them extensively, of align while others off. unfortunately have not found pattern render correctly , not.

i not want javascript solution - these grids have lot of javascript applied create them interactive , render huge amounts of info (over 7,000 rows) , don't want funky looping through each row, detecting widths, apply fixes.

thanks guys, allow me know if need more information.

edit -------------------------------------------------------------------------------------

our users utilize chrome 35.0.1916.153, , i've begun explicitly setting width of scrollbar create sure it's 16px:

::-webkit-scrollbar { width: 16px; border: 1px solid #ccc; }

again, works on monitor, @ moment cannot tell results on others. here's updated jsfiddle.

calc() can iffy cross-browser testing when need pixel perfect rendering. seek changing .grid-container .column-wrapper style this:

.grid-container .column-wrapper { width: 100%; padding-right: 16px; }

html css twitter-bootstrap

Comments

Post a Comment

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

php - Android app custom user registration and login with cookie using facebook sdk - i developing android application in users need register , log in using facebook. approximately, flow. open app first time, authenticate facebook, data, send info server create them business relationship in application, start session new business relationship in server, cookie perform later interactions. so far good. what need know wich info have send server, can able identify users when log in seccond time. because need start session in server , send cookie android app farther interactions. i'm using php server side language. i thinking getting getaccesstoken() in android facebook sdk, pass server on business relationship creation , storing in android app. but can't manage how login users on sec time utilize app. any suggestions ? in advance ! to uniquely identify user within app, should create request /me , user's id. guaranteed unique , remain con...
Read more

c# - Create a Notification Object (Email or Page) At Run Time -- Dependency Injection or Factory -

c# - Create a Notification Object (Email or Page) At Run Time -- Dependency Injection or Factory - i have code emails me notification when happens. trying add together page , also remove dependency on email. for reference; have name of notification want send stored string in database. @ runtime have list of people , string representation of want receive. i thought dependency injection ninject, kernel bindings got big , seemed hacking together. then thought simple factory, activator.createinstance(email/page) inotifcation, don't know how handle differing constructor parameters (unless utilize common, complex property, employee, has info need). so far have this: public interface inotification { void sendmessage(); } public class email: inotification { private readonly string _toemailaddress; private string body { { homecoming "email"; } } private static string smtphost { ...
Read more

Set Up Of Common Name Of SSL Certificate To Protect Plesk Panel -

Set Up Of Common Name Of SSL Certificate To Protect Plesk Panel - a pci compliance scanner balking self signed ssl certificate protecting secure access plesk panel contains name mismatch between location of plesk panel , name on certificate, namely self-signed cert's name "parallels" , domain reach plesk 'ip address:8443'. so figured go ahead , free ssl certificate seek fiddle error. when generated certificate used server domain name site name when generated certificate. if visit 'domain name:8443' fine, no ssl warning. if visit 'ip address:8443' (which believe scanner does) certificate name mismatch error, digicert's ssl checker says certificate name should ip address. can generate certificate mutual name ip address? tempted should pci scanner accepts, right mutual name use? run issue before? you can seek subject alternative name extension ip address. also, can maintain "parallels" mutual name, , add together ...
Read more