{"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 – 11 Answers] CSS – HTML – Space between two rows in a table"},"content":{"rendered":"

Is this possible via CSS?<\/p>\n

We are trying<\/strong><\/p>\n

Css Code<\/span> <\/div> 
tr.classname {  border-spacing: 5em;}<\/code><\/pre> <\/div>\n
to no avail.<\/p>\n
    \n
  • You need to use padding on your td elements.<\/li>\n
  • 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
  • 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
  • This will make it possible to use nested tables. (Cell C and D in the example code.) it shouldn’t break the code in any modern browsers.<\/li>\n<\/ul>\n
     
     Css Code<\/span> <\/div> 
    \/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. *\/tr.spaceUnder > td{  padding-bottom: 1em;}<\/code><\/pre> <\/div>\n
    HTML code:<\/strong><\/p>\n
     
     Html Code<\/span> <\/div> 
    <table>  \t\t<tbody>    <tr>      \t\t<td>A<\/td>      \t\t<td>B<\/td>    <\/tr>    \t\t<tr class="spaceUnder">      \t\t<td>C<\/td>      \t\t<td>D<\/td>    <\/tr>    \t\t<tr>      \t\t<td>E<\/td>      \t\t<td>F<\/td>    <\/tr>  <\/tbody><\/table><\/code><\/pre> <\/div>\n
    This should render somewhat like this:<\/strong><\/p>\n
    +—+—+<\/p>\n
    | A | B |<\/p>\n
    +—+—+<\/p>\n
    | C | D |<\/p>\n
    |\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0 |<\/p>\n
    +—+—+<\/p>\n
    | E | F |<\/p>\n
    +—+—+<\/p>\n
    In the parent table, try setting<\/p>\n
     
     Css Code<\/span> <\/div> 
    border-collapse:separate; border-spacing:5em;<\/code><\/pre> <\/div>\n
    Plus a border declaration, and see if this achieves your desired effect. Beware, though, that IE doesn’t support the “separated borders” model.<\/p>\n
    You have table with id albums with any data,omitted the trs and tds<\/p>\n
     
     Html Code<\/span> <\/div> 
    <table id="albums" cellspacing="0">       <\/table><\/code><\/pre> <\/div>\n
    In the css:<\/strong><\/p>\n
     
     Css Code<\/span> <\/div> 
    table#albums {    border-collapse:separate;    border-spacing:0 5px;}<\/code><\/pre> <\/div>\n[ad type=”banner”]\n
    since we have a background image behind the table, faking it with white padding wouldn’t work.<\/p>\n
     we opted to put an empty row in-between each row of content:<\/strong><\/p>\n
     
     Html Code<\/span> <\/div> 
    <tr class="spacer"><td><\/td><\/tr><\/code><\/pre> <\/div>\n
    Then use css to give the spacer rows a certain height and transparent background.<\/p>\n
    You may try to add separator row:<\/strong><\/p>\n
    Html:<\/strong><\/p>\n
     
     Html Code<\/span> <\/div> 
    <tr class="separator" \/><\/code><\/pre> <\/div>\n
    css:<\/strong><\/p>\n
     
     Css Code<\/span> <\/div> 
    table tr.separator { height: 10px; }<\/code><\/pre> <\/div>\n
    you can do<\/strong><\/p>\n
     
     Css Code<\/span> <\/div> 
    tr.classname td {background-color:red; border-bottom: 5em solid white}<\/code><\/pre> <\/div>\n[ad type=”banner”]\n
    Make sure the background color is set on the td rather than the row. This should work across most browsers…<\/p>\n
    You can use line-height in the table:<\/strong><\/p>\n
     
     Html Code<\/span> <\/div> 
    <table style="width: 400px; line-height:50px;"><\/code><\/pre> <\/div>\n
    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
    Also, border-spacing: goes on the TD, not the TR.<\/p>\n
    Try:<\/strong><\/p>\n
     
     Html Code<\/span> <\/div> 
    <html><head><style type="text\/css">    \t#ex    { border-collapse: separate; }    \t#ex td { border-spacing: 1em; }\t<\/style><\/head><body>    \t <table id="ex">\t<tr><td>A<\/td>\t<td>B<\/td><\/tr>\t<tr><td>C<\/td>\t<td>D<\/td><\/tr><\/table>\t<\/body><\/code><\/pre> <\/div>\n
    If you apply float to tr elements, you can space between two rows with margin attribute.<\/p>\n
     
     Css Code<\/span> <\/div> 
    table tr{\t\tfloat: left\t\twidth: 100%;\t\t}\t\ttr.classname {\t\tmargin-bottom:5px;\t\t}<\/code><\/pre> <\/div>\n[ad type=”banner”]\n
    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 “space” is created .<\/p>\n
     
     Css Code<\/span> <\/div> 
    tr \t\t{   \t                      background-color: #FFD700;  \t                      border: 10px solid white;\t\t}<\/code><\/pre> <\/div>\n
    Simply put div inside the td and set the following styles of div:<\/strong><\/p>\n
     
     Css Code<\/span> <\/div> 
    margin-bottom: 20px;\t\theight: 40px;\t\tfloat: left;\t\twidth: 100%;<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"
    PROBLEM : Is this possible via CSS? We are trying 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. In the CSS code below, the greater-than […]<\/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}]}}