Bricks Version: 1.5.6
Browser: Brave (latest)
OS: macOS
URL:
When creating a table from div elements(and using custom tags), that is nested inside a flex element with two elements (one of which has a fixed width), the display: table option is not available and can’t stretch a table to 100% width. Using display inline will not fully work.
Workaround: Set the display to ‘inline’ on the table element and use custom CSS to set the display property to ‘table’. So the display mode ‘table’ or ‘inline-table’ are missing. Bricks properly recognizes table-row and groups display properties, however.
I attached an example (that I hopefully cleared of all my experiments ;))
Before:
After:
{"id":2066,"name":"basic-table-test","title":"Basic Table - Test","date":"2022-10-20 08:36:59","date_formatted":"October 20, 2022","author":{"name":"admin_Sebastian","avatar":"https:\/\/secure.gravatar.com\/avatar\/6c0f88fd0c5d06a9439698e42c4b8067?s=60&d=mm&r=g","url":""},"permalink":"https:\/\/newsam.local\/blog\/template\/basic-table-test\/","thumbnail":false,"bundles":[],"tags":[],"type":"content","content":[{"id":"cjqgyh","name":"section","parent":0,"children":["oactkp"],"settings":[]},{"id":"utaofm","name":"container","parent":"oactkp","children":["rjfaxi","pxaadi","mnjkfj"],"settings":{"tag":"custom","customTag":"table","_width:mobile_portrait":"100%","_cssGlobalClasses":["pweedt"],"_display:mobile_landscape":"inline"},"label":"Table"},{"id":"rjfaxi","name":"div","parent":"utaofm","children":["yufkhf"],"settings":{"tag":"custom","customTag":"colgroup"},"label":"Table Header"},{"id":"yufkhf","name":"div","parent":"rjfaxi","children":[],"settings":{"tag":"custom","customTag":"col","_attributes":[{"id":"gguqwk","name":"span","value":"1"}]},"label":"Col"},{"id":"pxaadi","name":"div","parent":"utaofm","children":["etkbri"],"settings":{"tag":"custom","customTag":"thead"},"label":"Table Header"},{"id":"etkbri","name":"div","parent":"pxaadi","children":["voabod","ftzdpl","jlqxuj","fcxkxe","vyqtbm","ynqlmq"],"settings":{"tag":"custom","customTag":"tr"},"label":"Row"},{"id":"voabod","name":"div","parent":"etkbri","children":["hilrjw"],"settings":{"tag":"custom","customTag":"th"},"label":"Cell"},{"id":"hilrjw","name":"text-basic","parent":"voabod","children":[],"settings":{"tag":"span"}},{"id":"ftzdpl","name":"div","parent":"etkbri","children":["dzeefg"],"settings":{"tag":"custom","customTag":"th"},"label":"Cell"},{"id":"dzeefg","name":"text-basic","parent":"ftzdpl","children":[],"settings":{"text":"QTD","tag":"span"}},{"id":"jlqxuj","name":"div","parent":"etkbri","children":["axrero"],"settings":{"tag":"custom","customTag":"th"},"label":"Cell"},{"id":"axrero","name":"text-basic","parent":"jlqxuj","children":[],"settings":{"text":"YTD","tag":"span"}},{"id":"fcxkxe","name":"div","parent":"etkbri","children":["rfulew"],"settings":{"tag":"custom","customTag":"th"},"label":"Cell"},{"id":"rfulew","name":"text-basic","parent":"fcxkxe","children":[],"settings":{"text":"3 Years","tag":"span"}},{"id":"vyqtbm","name":"div","parent":"etkbri","children":["clbdxj"],"settings":{"tag":"custom","customTag":"th"},"label":"Cell"},{"id":"clbdxj","name":"text-basic","parent":"vyqtbm","children":[],"settings":{"text":"5 Years","tag":"span"}},{"id":"ynqlmq","name":"div","parent":"etkbri","children":["spctlm"],"settings":{"tag":"custom","customTag":"th"},"label":"Cell"},{"id":"spctlm","name":"text-basic","parent":"ynqlmq","children":[],"settings":{"text":"10 Years","tag":"span"}},{"id":"mnjkfj","name":"div","parent":"utaofm","children":["qedtcn","bxraws","jgkqit"],"settings":{"tag":"custom","customTag":"tbody"},"label":"Table body"},{"id":"qedtcn","name":"div","parent":"mnjkfj","children":["fzedgs","hdyirf","uahbqv","vyuakv","xnebyh","sidiof"],"settings":{"tag":"custom","customTag":"tr"},"label":"Row"},{"id":"fzedgs","name":"div","parent":"qedtcn","children":["ppxxbv"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"ppxxbv","name":"text-basic","parent":"fzedgs","children":[],"settings":{"text":"Some Text","tag":"span"}},{"id":"hdyirf","name":"div","parent":"qedtcn","children":["tkcqsw"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"tkcqsw","name":"text-basic","parent":"hdyirf","children":[],"settings":{"text":"(6.7%)","tag":"span"}},{"id":"uahbqv","name":"div","parent":"qedtcn","children":["cgwdmr"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"cgwdmr","name":"text-basic","parent":"uahbqv","children":[],"settings":{"text":"(22.2%)","tag":"span"}},{"id":"vyuakv","name":"div","parent":"qedtcn","children":["rmfyhy"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"rmfyhy","name":"text-basic","parent":"vyuakv","children":[],"settings":{"text":"4.6%","tag":"span"}},{"id":"xnebyh","name":"div","parent":"qedtcn","children":["mzlfwf"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"mzlfwf","name":"text-basic","parent":"xnebyh","children":[],"settings":{"text":"5.4%","tag":"span"}},{"id":"sidiof","name":"div","parent":"qedtcn","children":["hzosdo"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"hzosdo","name":"text-basic","parent":"sidiof","children":[],"settings":{"text":"7.7%","tag":"span"}},{"id":"bxraws","name":"div","parent":"mnjkfj","children":["jiujks","eqinwq","rgqhdh","rrjylw","uytudp","kykmtd"],"settings":{"tag":"custom","customTag":"tr"},"label":"Row"},{"id":"jiujks","name":"div","parent":"bxraws","children":["xvzgho"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"xvzgho","name":"text-basic","parent":"jiujks","children":[],"settings":{"text":"A bit more Text","tag":"span"}},{"id":"eqinwq","name":"div","parent":"bxraws","children":["pgzkrm"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"pgzkrm","name":"text-basic","parent":"eqinwq","children":[],"settings":{"text":"(6.9%)","tag":"span"}},{"id":"rgqhdh","name":"div","parent":"bxraws","children":["ldiceu"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"ldiceu","name":"text-basic","parent":"rgqhdh","children":[],"settings":{"text":"(22.6%)","tag":"span"}},{"id":"rrjylw","name":"div","parent":"bxraws","children":["ejxkja"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"ejxkja","name":"text-basic","parent":"rrjylw","children":[],"settings":{"text":"3.9%","tag":"span"}},{"id":"uytudp","name":"div","parent":"bxraws","children":["nvwzkx"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"nvwzkx","name":"text-basic","parent":"uytudp","children":[],"settings":{"text":"4.7%","tag":"span"}},{"id":"kykmtd","name":"div","parent":"bxraws","children":["gwmskt"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"gwmskt","name":"text-basic","parent":"kykmtd","children":[],"settings":{"text":"7.0%","tag":"span"}},{"id":"jgkqit","name":"div","parent":"mnjkfj","children":["twbzov","aoxfvc","jmxawh","rxpruk","vvdqhr","oyvxrw"],"settings":{"tag":"custom","customTag":"tr"},"label":"Row"},{"id":"twbzov","name":"div","parent":"jgkqit","children":["jsdfok"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"jsdfok","name":"text-basic","parent":"twbzov","children":[],"settings":{"text":"Even more text to display<br>","tag":"span"}},{"id":"aoxfvc","name":"div","parent":"jgkqit","children":["brdhiy"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"brdhiy","name":"text-basic","parent":"aoxfvc","children":[],"settings":{"text":"(5.7%)","tag":"span"}},{"id":"jmxawh","name":"div","parent":"jgkqit","children":["pyypuj"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"pyypuj","name":"text-basic","parent":"jmxawh","children":[],"settings":{"text":"(24.2%)","tag":"span"}},{"id":"rxpruk","name":"div","parent":"jgkqit","children":["pgjxte"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"pgjxte","name":"text-basic","parent":"rxpruk","children":[],"settings":{"text":"6.5%","tag":"span"}},{"id":"vvdqhr","name":"div","parent":"jgkqit","children":["ragsvl"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"ragsvl","name":"text-basic","parent":"vvdqhr","children":[],"settings":{"text":"7.5%","tag":"span"}},{"id":"oyvxrw","name":"div","parent":"jgkqit","children":["ezdbth"],"settings":{"tag":"custom","customTag":"td"},"label":"Cell"},{"id":"ezdbth","name":"text-basic","parent":"oyvxrw","children":[],"settings":{"text":"10.4%","tag":"span"}},{"id":"oactkp","name":"container","parent":"cjqgyh","children":["oavhpg","utaofm"],"settings":{"_direction":"row"}},{"id":"oavhpg","name":"container","parent":"oactkp","children":["tzljqm"],"settings":{"_width":"40%"}},{"id":"tzljqm","name":"heading","parent":"oavhpg","children":[],"settings":{"text":"Set the table to display:table","tag":"h4"}}],"templateType":"content","global_classes":[{"id":"pweedt","name":"samchart","settings":[]}]}
and required css:
table.samchart {
border-collapse: collapse;
width: 100% !important;
}
table.samchart thead tr, table tr:nth-child(even) {
background-color: var(--secondary-ultra-light);
}
table.samchart td {
padding: var(--space-xs) var(--space-s);
text-align: center;
}
table.samchart td {
width: 14%;
}
table.samchart tr td:first-of-type{
width: 32%;
}
table.samchart td:nth-child(-n+5){
border-right: 1.5px solid var(--secondary-light);
}
table.samchart thead tr th:not(:first-child) {
background-color: var(--primary);
color: var(--shade-white);
}
table.samchart tbody tr td:first-child{
text-align: left;
padding-right: 2rem;
}