{"id":2336,"date":"2011-07-08T01:06:57","date_gmt":"2011-07-08T05:06:57","guid":{"rendered":"http:\/\/elwinlee.com\/blog\/?p=2336"},"modified":"2016-09-28T22:06:12","modified_gmt":"2016-09-29T02:06:12","slug":"html-fixed-column-width-regardless-of-content","status":"publish","type":"post","link":"https:\/\/www.elwinlee.com\/blog\/html-fixed-column-width-regardless-of-content\/","title":{"rendered":"HTML: Fixed Column Width Regardless of Content"},"content":{"rendered":"

I was doing some scripting in PHP to create tables with data drawn from a database. Drawing multiple fields using the same script caused the table layout to shift. This can be fixed using the\u00a0tag within the table. I thought it was kind of interesting, so I thought sharing it using an example.<\/p>\n

An example of a 3 column table setup would be something like this:<\/p>\n

<table width=\"400\" border=\"1\">\r\n   <?php $table_count = 0; ?>\r\n      <?php if(count($this->items) > 0):   \/\/if there's content\r\n         foreach($this->items as $content):   \/\/loop through all content\r\n            if( $table_count == 0 ): ?>\r\n               <tr>\r\n      <?php endif; ?>\r\n         <td width=\"33%\">   \/\/to create 3 columns\r\n            \/\/insert content here\r\n         <\/td>\r\n            <?php if( $table_count == 2 ): ?>   \/\/3 columns, so table_count = 3 - 1 = 2\r\n               <\/tr>\r\n            <?php $table_count = 0; ?>   \/\/column length reached, reset count\r\n               <?php else: ?>\r\n                  <?php $table_count++; ?>\r\n            <?php endif; ?>\r\n<\/table><\/pre>\n
I was using the same script to parse multiple database fields onto 1 page. E.g. an employees page of a company. The page would display all the employees categorized in different positions within the company, so the number of people per position varies.<\/p>\n
The script shown above would be used for all the categories to create a 3 column table.
\nCreating the table works fine, if we parse content of 3 or more items from the database to PHP. But a problem occurs with the layout if there are less items than the number of columns within a category.<\/p>\n
Example with enough items:<\/p>\n\n\n\n
Item 1<\/td>\nItem 2<\/td>\nItem 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
Example if the database field has only 2 items (using the same script)<\/p>\n\n\n\n
Item 1<\/td>\nItem 2<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
Or look at the visual example
\n\"\"<\/a><\/p>\n
To fix this, simply add a table-layout CSS style and <col><\/p>\n
><table width=\"70%\" style=\"table-layout:fixed\">\r\n                     <col width=\"33%\">\r\n                     <col width=\"33%\">\r\n                     <col width=\"33%\"><\/pre>\n
\"\"<\/a><\/p>\n
Have fun \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML: Fixed Column Width Regardless of Content<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1079],"tags":[1036,1037,431,1038,749,1022,1023,1024,1025,1026,1027,1028,1029,1030,1031,1032,1035],"class_list":["post-2336","post","type-post","status-publish","format-standard","hentry","category-how-to-fix-stuff","tag-table-layout","tag-database","tag-layout","tag-data","tag-code","tag-html","tag-fixed","tag-column","tag-table","tag-regardless","tag-content","tag-width","tag-column-width","tag-php","tag-shift","tag-col","tag-css"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1mtRf-BG","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/posts\/2336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/comments?post=2336"}],"version-history":[{"count":2,"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/posts\/2336\/revisions"}],"predecessor-version":[{"id":4384,"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/posts\/2336\/revisions\/4384"}],"wp:attachment":[{"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/media?parent=2336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/categories?post=2336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elwinlee.com\/blog\/wp-json\/wp\/v2\/tags?post=2336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}