tables with similar data do not have same width columns

[zebapy]

It would be nice to have a way for these to line up when they are separate tables.

Possibly we could use data attributes to do something like data-table-group="UNIQUEID" which would use JS to make column widths the same. Otherwise we'd need css width classes whitelisted or similar.

https://www.middlebury.edu/institute/academics/degree-programs/international-education-management/curriculum

@kettlestitch you brought this up to me awhile back and Darcy just reminded me. I'm just opening an issue in case we want to look at it later on.

[ghost]

@zebapy I think this would still be good to look at. Might be used more as we build out the other sites, so a fix would be good to have.

[zebapy]

So I can set all tables to have table-layout:fixed which makes them maintain column widths

but it affects all tables on page (granted this one should be a dl but I don't know about other pages)

So we'd need to whitelist a data attribute (any harm in white listing any data attributes?) which would have to be applied to tables in source code..

Or we figure out a good editor option to address the problem (a Table component 🤐 with checkbox for fixed layout or not?)

[ghost]

So the solution is taking the number of columns and giving them each an equal width? It solves the problem, but it looks odd in your first example. Could you add a class override sort of thing? Col-2, Col4 sort of thing?

[zebapy]

Was there not hesitancy to allow classes in the wysiywg?

I was thinking of trying to create some javascript that would determine the widest cell of the same column across a group of tables (determined by the editor?), then set each to that width, and repeat for the other columns. I think that would work.

[ghost]

No there totally is, just trying to throw out ideas.

…

________________________________ From: Zeb Pykosz <[email protected]> Sent: Tuesday, September 18, 2018 10:11:11 AM To: middlebury/frontend Cc: Smith, Aaron P.; Mention Subject: Re: [middlebury/frontend] tables with similar data do not have same width columns (#88) Notice: This email is from an external sender. Please use caution before clicking links or opening attachments. Was there not hesitancy to allow classes in the wysiywg? I was thinking of trying to create some javascript that would determine the widest cell of the same column across a group of tables (determined by the editor?), then set each to that width, and repeat for the other columns. I think that would work. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmiddlebury%2Ffrontend%2Fissues%2F88%23issuecomment-422408464&data=02%7C01%7Caarons%40middlebury.edu%7C2fcf898256e649e172cb08d61d70962e%7Ca1bb0a191576421dbe93b3a7d4b6dcaa%7C1%7C0%7C636728766721371619&sdata=TV2LPTJUI%2FnfaUwBugsoj6kkUQkFdJj1ONlVAluUpno%3D&reserved=0>, or mute the thread<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FALmEI9FmSMLQlz5k16hhedFCwcoSdhJzks5ucP7_gaJpZM4Rrv3J&data=02%7C01%7Caarons%40middlebury.edu%7C2fcf898256e649e172cb08d61d70962e%7Ca1bb0a191576421dbe93b3a7d4b6dcaa%7C1%7C0%7C636728766721381623&sdata=hdeRxpuizR1VjnyKu5FICcTXIfYDHnhCG%2FynXUIEv88%3D&reserved=0>.

[zebapy]

What sort of editor experience do we want for this? Are we ok with someone needing to add data-table-group attributes? Assuming something like this would only be needed on high profile pages that someone of our team would be editing.

[ghost]

I believe that would be the use case. Yes. Aaron Smith Director of Digital Services Middlebury 152 College St, Middlebury, VT 05753 O: 802-443-5080 | E: [email protected]

…

________________________________ From: Zeb Pykosz <[email protected]> Sent: Tuesday, September 18, 2018 10:21:30 AM To: middlebury/frontend Cc: Smith, Aaron P.; Mention Subject: Re: [middlebury/frontend] tables with similar data do not have same width columns (#88) Notice: This email is from an external sender. Please use caution before clicking links or opening attachments. What sort of editor experience do we want for this? Are we ok with someone needing to add data-table-group attributes? Assuming something like this would only be needed on high profile pages that someone of our team would be editing. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmiddlebury%2Ffrontend%2Fissues%2F88%23issuecomment-422412250&data=02%7C01%7Caarons%40middlebury.edu%7Cda615744df12468bd03108d61d72088a%7Ca1bb0a191576421dbe93b3a7d4b6dcaa%7C1%7C0%7C636728772938832116&sdata=kHxknNhCasOvqCVevdQ17ZJ2AVneTKiakQYUdXmF%2F6Y%3D&reserved=0>, or mute the thread<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FALmEI7vYqAH2N4xPh3gD8d7uMp2kGz49ks5ucQFqgaJpZM4Rrv3J&data=02%7C01%7Caarons%40middlebury.edu%7Cda615744df12468bd03108d61d72088a%7Ca1bb0a191576421dbe93b3a7d4b6dcaa%7C1%7C0%7C636728772938832116&sdata=%2FKea0QTsFqd2tATbi2jOgQvQ71Lg2xZPH6n6X8c0%2FtY%3D&reserved=0>.