{"id":1481,"date":"2017-03-21T17:48:11","date_gmt":"2017-03-21T12:18:11","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1481"},"modified":"2017-03-29T10:53:51","modified_gmt":"2017-03-29T05:23:51","slug":"space-between-two-rows-in-a-table","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/space-between-two-rows-in-a-table\/","title":{"rendered":"[Solved &#8211; 11 Answers] CSS &#8211; HTML &#8211; Space between two rows in a table"},"content":{"rendered":"<p><label class=\"label label-Warning\">PROBLEM :<\/label><\/p>\n<p>Is this possible via CSS?<\/p>\n<p><strong>We are trying<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dtr.classname%20%7B%0A%20%20border-spacing%3A%205em%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>to no avail.<\/p>\n<p><label class=\"label label-info\">SOLUTION 1<\/label><\/p>\n<ul>\n<li>You need to use padding on your td elements.<\/li>\n<li>Something like this should do the trick. You can, of course, get the same result using a top padding instead of a bottom padding.<\/li>\n<li>In the CSS code below, the greater-than sign means that the padding is only applied to td elements that are direct children to tr elements with the class spaceUnder.<\/li>\n<li>This will make it possible to use nested tables. (Cell C and D in the example code.) it shouldn\u2019t break the code in any modern browsers.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%2F*%20Apply%20padding%20to%20td%20elements%20that%20are%20direct%20children%20of%20the%20tr%20elements%20with%20class%20spaceUnder.%20*%2F%0Atr.spaceUnder%20%3E%20td%0A%7B%0A%20%20padding-bottom%3A%201em%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>HTML code:<\/strong><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctable%3E%0A%20%20%09%09%3Ctbody%3E%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EA%3C%2Ftd%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EB%3C%2Ftd%3E%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%09%09%3Ctr%20class%3D%22spaceUnder%22%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EC%3C%2Ftd%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3ED%3C%2Ftd%3E%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%09%09%3Ctr%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EE%3C%2Ftd%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EF%3C%2Ftd%3E%20%20%20%20%3C%2Ftr%3E%20%20%3C%2Ftbody%3E%3C%2Ftable%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>This should render somewhat like this:<\/strong><\/p>\n<p>+\u2014+\u2014+<\/p>\n<p>| A | B |<\/p>\n<p>+\u2014+\u2014+<\/p>\n<p>| C | D |<\/p>\n<p>|\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0 |<\/p>\n<p>+\u2014+\u2014+<\/p>\n<p>| E | F |<\/p>\n<p>+\u2014+\u2014+<\/p>\n<p><label class=\"label label-info\">SOLUTION 2<\/label><\/p>\n<p>In the parent table, try setting<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dborder-collapse%3Aseparate%3B%20%0Aborder-spacing%3A5em%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>Plus a border declaration, and see if this achieves your desired effect. Beware, though, that IE doesn\u2019t support the \u201cseparated borders\u201d model.<\/p>\n<p><label class=\"label label-info\">SOLUTION 3<\/label><\/p>\n<p>You have table with id albums with any data,omitted the trs and tds<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctable%20id%3D%22albums%22%20cellspacing%3D%220%22%3E%20%20%20%20%20%20%20%0A%3C%2Ftable%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>In the css:<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dtable%23albums%20%0A%7B%0A%20%20%20%20border-collapse%3Aseparate%3B%0A%20%20%20%20border-spacing%3A0%205px%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 4<\/label><\/p>\n<p>since we have a background image behind the table, faking it with white padding wouldn\u2019t work.<\/p>\n<p><strong> we opted to put an empty row in-between each row of content:<\/strong><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctr%20class%3D%22spacer%22%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>Then use css to give the spacer rows a certain height and transparent background.<\/p>\n<p><label class=\"label label-info\">SOLUTION 5<\/label><\/p>\n<p><strong>You may try to add separator row:<\/strong><\/p>\n<p><strong>Html:<\/strong><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctr%20class%3D%22separator%22%20%2F%3E\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>css:<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dtable%20tr.separator%20%7B%20height%3A%2010px%3B%20%7D\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 6<\/label><\/p>\n<p><strong>you can do<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dtr.classname%20td%20%0A%7B%0Abackground-color%3Ared%3B%20%0Aborder-bottom%3A%205em%20solid%20white%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p>Make sure the background color is set on the td rather than the row. This should work across most browsers\u2026<\/p>\n<p><label class=\"label label-info\">SOLUTION 7<\/label><\/p>\n<p><strong>You can use line-height in the table:<\/strong><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctable%20style%3D%22width%3A%20400px%3B%20line-height%3A50px%3B%22%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8<\/label><\/p>\n<p>You need to set border-collapse: separate; on the table; most browser default stylesheets start at border-collapse: collapse;, which ditches border spacing.<\/p>\n<p>Also, border-spacing: goes on the TD, not the TR.<\/p>\n<p><strong>Try:<\/strong><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Chtml%3E%3Chead%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%09%23ex%20%20%20%20%7B%20border-collapse%3A%20separate%3B%20%7D%0A%20%20%20%20%09%23ex%20td%20%7B%20border-spacing%3A%201em%3B%20%7D%0A%09%3C%2Fstyle%3E%3C%2Fhead%3E%3Cbody%3E%0A%20%20%20%20%09%20%3Ctable%20id%3D%22ex%22%3E%0A%09%3Ctr%3E%3Ctd%3EA%3C%2Ftd%3E%0A%09%3Ctd%3EB%3C%2Ftd%3E%3C%2Ftr%3E%0A%09%3Ctr%3E%3Ctd%3EC%3C%2Ftd%3E%0A%09%3Ctd%3ED%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%0A%09%3C%2Fbody%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 9<\/label><\/p>\n<p>If you apply float to tr elements, you can space between two rows with margin attribute.<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dtable%20tr%7B%0A%09%09float%3A%20left%0A%09%09width%3A%20100%25%3B%0A%09%09%7D%0A%0A%09%09tr.classname%20%7B%0A%09%09margin-bottom%3A5px%3B%0A%09%09%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 10<\/label><\/p>\n<p>For creating an illusion of spacing between rows, apply background color to row and then create a thick border with white color so that a \u201cspace\u201d is created .<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dtr%20%0A%09%09%7B%0A%20%20%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23FFD700%3B%0A%20%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%2010px%20solid%20white%3B%0A%09%09%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 11<\/label><\/p>\n<p><strong>Simply put div inside the td and set the following styles of div:<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dmargin-bottom%3A%2020px%3B%0A%09%09height%3A%2040px%3B%0A%09%09float%3A%20left%3B%0A%09%09width%3A%20100%25%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM : Is this possible via CSS? We are trying [pastacode lang=\u201dcss\u201d manual=\u201dtr.classname%20%7B%0A%20%20border-spacing%3A%205em%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] to no avail. SOLUTION 1 You need to use padding on your td elements. Something like this should do the trick. You can, of course, get the same result using a top padding instead of a bottom padding. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[2958,2967,2959,2956,2963,2966,2955,2969,2957,2968,2964,2962,2970,2960,2965,2961],"class_list":["post-1481","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-css-border-spacing-property","tag-display-table-row-padding","tag-how-to-add-space-between-table-rows","tag-how-to-break-a-line-or-space-in-between-two-rows-of-the-html-table","tag-how-to-give-space-between-two-rows-in-html","tag-how-to-give-space-between-two-tables-in-html","tag-html-css-how-do-i-create-a-gap-between-rows-in-a-table","tag-html-row-padding","tag-html-table-cellspacing-attribute","tag-html-table-remove-space-between-rows","tag-html-table-spacing-between-columns","tag-row-spacing-in-tables","tag-space-between-rows-bootstrap","tag-spacing-how-to-set-the-space-between-rows-in-a-table","tag-table-border-spacing","tag-what-is-the-syntax-for-having-a-break-between-two-rows"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1481"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1481\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}