{"id":511,"date":"2007-02-28T12:42:39","date_gmt":"2007-02-28T16:42:39","guid":{"rendered":"http:\/\/www.wehuberconsultingllc.com\/wordpress\/?p=511"},"modified":"2007-03-19T13:37:37","modified_gmt":"2007-03-19T17:37:37","slug":"one-pixel-table-border-with-css","status":"publish","type":"post","link":"https:\/\/wehuberconsultingllc.com\/wordpress\/2007\/02\/28\/one-pixel-table-border-with-css\/","title":{"rendered":"One-pixel table border with CSS"},"content":{"rendered":"
\n

Problem<\/h4>\n

I want to have a one-pixel one-color solid border around a table and its cells. Adding border=\"1\"<\/code> to the table<\/code> tag isn’t suitable, because it looks horrific in most of the browsers.<\/p>\n<\/blockquote>\n

Source: One-pixel table border with CSS<\/a> <\/p>\n

I was confronted with this same problem in phpWebsite. I was using a table to display the pedigree of a horse with the border set by using border=\"1\"<\/code>. I am not sure what it was doing but it looked pretty ugly. His solution for a default one-pixel border looked pretty simple and elegant and I was determined to figure out a way to use it.<\/p>\n

table\r\n{\r\n    border-color: #600;\r\n    border-width: 0 0 1px 1px;\r\n    border-style: solid;\r\n}\r\n\r\ntd\r\n{\r\n    border-color: #600;\r\n    border-width: 1px 1px 0 0;\r\n    border-style: solid;\r\n    margin: 0;\r\n    padding: 4px;\r\n    background-color: #FFC;\r\n}<\/pre>\n
When I tried to use this code as the default definitions for table<\/code> and td<\/code> elements used by phpWebsite I found it affected multiple areas I did not want changed. I needed to refine its use via selectors and the ID<\/code> selector was my first choice. I had used the Class<\/code> selector before and it involved a lot more work adding it on table<\/code> and td<\/code> elements. The design of phpWebsite uses section templates for creating formatted content on web pages. So I added the above CSS code to my site CSS but prefaced it with the #mytable<\/code> ID so that I would override the default table definitions only in #mytable<\/code> blocks. Then I created a new section template to wrap a <div id=\"mytable\"><\/code> around the existing content. All I needed to do was go back and update the existing sections containing the tables to use the new template. Within a fairly short time all of my tables had their ugly border replaced with a simple 1 pixel border.<\/p>\n
Technorati tags: phpwebsite<\/a>, css<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Problem I want to have a one-pixel one-color solid border around a table and its cells. Adding border=”1″ to the table tag isn’t suitable, because it looks horrific in most of the browsers. Source: One-pixel table border with CSS I was confronted with this same problem in phpWebsite. I was using a table to display … Continue reading “One-pixel table border with CSS”<\/span><\/a><\/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":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[2,8],"tags":[],"class_list":["post-511","post","type-post","status-publish","format-standard","hentry","category-css","category-phpwebsite"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4iN3d-8f","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/posts\/511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/comments?post=511"}],"version-history":[{"count":0,"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/posts\/511\/revisions"}],"wp:attachment":[{"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/media?parent=511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/categories?post=511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wehuberconsultingllc.com\/wordpress\/wp-json\/wp\/v2\/tags?post=511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}