How to control top spacing using border-spacing on css display table

Hi,

I have my code, and I have three questions: (the i) is the most important!)
i) with border-collapse: separate and border-spacing, I can put space within rows. But I don’t want the top space in the row, how can I toggle it?
ii) why I can’t see the blue borders of the rows with border-collapse: separate, but I can see them with border-collapse: collapse ?
iii) why if I put float: left on the first p, I obtain extra space on top of the first cell on the left?

can you help me please? Many thanks!

see the fiddle:
jsfiddle.net/framj00/zh45Lr72/

<!DOCTYPE html>
<html lang='it'>
  <head>
    <title></title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>
    <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
    <link href='/favicon.png' rel='shortcut icon' type='image/png'>
    <style>
       html, body {
          margin: 0;
          padding: 0;
       }

       .table {
          display: table;
          table-layout: fixed;
          width: 100%;
          height: 100%;
       }

       .cell {
          display: table-cell;
       }

       .row {
          display: table-row;
       }

       .table>.cell {
          width: 50%;
          height: 100%;
          border: 1px solid red;
       }

       .table .cell .row {
          border: 1px solid blue;
       }

       .row p:first-child {
          margin: 0;
          width: 64px;
          height: 64px;
          background: tomato;
          float: left;
       }

       .row p {
          margin: 0;
       }

       .cell .table {
          border-spacing: 10px;
          border-collapse: separate;
       }


    </style>
  </head>
  <body>
     <div class='table'>
        <div class='cell'>
           <div class='table'>
              <div class='row'>
                 <p>Some text</p>
                 <p>Lorem ipsum dolor sit amet consectetuer mauris id sapien at elit. Nec Morbi Nam a Morbi id et pretium Ut sagittis orci. Senectus eros Nulla venenatis mi ultrices eget Nam nec convallis ligula.</p>
              </div>
           </div>
        </div>
        <div class='cell'>
           <div class='table'>
              <div class='row'>
                 <p>Some text</p>
              </div>
              <div class='row'>
                 <p>Some text</p>
              </div>
              <div class='row'>
                 <p>Some text</p>
              </div>
              <div class='row'>
                 <p>Some text</p>
              </div>
           </div>
        </div>
     </div>
  </body>
</html>

thanks!

  1. {border-spacing:horiz vert}, ie: {border-spacing:10px 0}

  2. table-rows accept very few properties because they are part of the framing structure of a table. One should not assign a border to a table-row. table-rows have no height… a border has height.

  3. Table-rows should not contain anything except a table-cell. No paragraphs, etc. Content can go inside of a table or a table-cell, but not a table-row.

The answer to the float question has to do with the alignment of content between cells. Assign anything other than baseline to fix that behavior (if I undertstand the question correctly). Most folks assign {vertical-align:top;} to table-cells to override the default {vertical-align:baseline} but it depends on the situation.

1 Like

thanks!

ok, but, I don’t want the space only in the top of each row (or also I don’t want the top space in the first one, and I don’t want bottom space in the last one). With horiz value I can control both top and bottom and not one of them.

If I understand your concern…

The horizontal number is the horizontal space between cells. The vertical number is the vertical space between cells. That same value is applied to the cells along the top, right, bottom, and left edges. In other words, those values are applied to all cells. Yes, there will be space inside the boundary of the table. One can use negative margins to expand the edges of the table by the same amount as the border-spacing to compensate for the space around the edge cells. Depends on the situation whether that is practical or not.

sorry, i’m wrong: with vert value I can control both top and bottom and not one of them.

It seems not so practical.

So, If I understand, if I don’t want a top space, even if it is useful to have a ordered and tabular layout, the better and clean way is don’t use table rows. Or at least a table-cell with divs (and not with rows) so I can edit padding or margin without so many problems. Or not?

If you need the tabular layout, then the table structure is probably the best way to go. I would need to see how you plan to use the table before I could say for sure. Depending on the layout, a rigid table structure may not be needed.

I do not understand what you are saying. Horizontal value controls the space on either side of the cells, wereas the Vertical value sets the space above and below cells.

You cannot control both top and bottom space with the horizontal value. The horizonal value does not affect top and bottom space.

yeah, sorry, a typo! I have written horiz instead of vert!

Can you provide an example of what you want to do?

You can see on the fiddle, but I don’t want that extra space on the top of the first row and on the bottom of the last row.

franciska, there is only one row in the fiddle.

look in the second table cell to the right

Yes, the right cell contains a nested table. Sorry, I did not look closely at the code. My bad.

Give me a minute to copy it to a file.

I have to go out for awhile, now.

However, based on your fiddle, I would recommend using a different strategy. Let each row on the right side be an independent table. Those tables can be separated with margin-top.

I’ll have to finish my example later this evening.

Generally I use negative margins to offset the border-spacing when not required at the start and end of a table.

In the simple example above you can just use this:

.cell .table {
          border-spacing: 10px;
          border-collapse: separate;
		  margin:-10px 0;
       }

However in more complex situations you may need to ensure that the negative margin doesn’t sit on top of something else but its not usually a major problem.

As Ron said above you probably don’t need rows on that right side anyway unless you have some special alignment going on.

1 Like

I can’t really get my head around your fiddle. I cannot see a practical reason for the nested tables in your code.

In this demo there are no nested tables and no table-rows.

I have rewritten it as two equal height columns (the only table and table-cells). The contents of those cells are floated divs and paragraphs within ".msgbox"s. There is 10px of vertical space between the ".mbox"s and none at the top and bottom. (they are not part of a table)

Demonstrating how horizontal border-spacing between the cells and the table can be negated with a negative margin on a wrapper is the primary purpose of this demo.

I used {border-spacing:10px 0} to apply horizontal space between the columns/cells and no space at the top and bottom.

There is a .twrapper around the .table with -10px of horizontal margin to compensate for the 10px of border-spacing applied between the table-cells and their parent table. You can test the behavior by commenting out the margin property in .twrapper.

In case you are using a table with border-spaced cells, you can negate vertical border-spacing around the edges in the same way. Just add the vertical -10px to .trwrapper.

I hope this helps.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>franciska1</title>
<!--
https://www.sitepoint.com/community/t/how-to-control-top-spacing-using-border-spacing-on-css-display-table/224723
franciska
May 21,2016 2:29 PM
-->
    <style type="text/css">

html, body {
    padding:0;
    margin:10px;
}

.outer {
    max-width:960px;
    border:10px solid pink;
    margin:0 auto;
}
.twrapper {
    margin:0 -10px;   /* Removes border-space between table and edge cells.  Enable and Disable this property to demonstrate. */
}
.table {
    display:table;
    table-layout:fixed;
    width:100%;
    border-spacing:10px 0;
/*    outline:1px solid magenta;   /* TEST Outline.  To Be DELETED. */
    margin:0 auto;
}
.tcell {
    display:table-cell;
    vertical-align:top;
/*    outline:1px dotted blue;   /* TEST Outline.  To Be DELETED. */
}
.msgbox {
    background-color:#def;
    overflow:hidden;
}
.msgbox + .msgbox {
    margin-top:10px;
}
.txtbox {
    width:64px;
    height:64px;
    float:left;
    background:tomato;
    margin-right:.5em;
}
p {margin:0;}

    </style>
</head>
<body>

<div class="outer">
    <div class="twrapper">
        <div class='table'>
            <div class='tcell col1'>
                <div class='msgbox'>
                    <div class='txtbox'>
                        <p>Some text</p>
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum.</p>
                </div>
            </div>
            <div class='tcell col2'>
                <div class='msgbox'>
                    <div class='txtbox'>
                        <p>Some text</p>
                    </div>
                </div>
                <div class='msgbox'>
                    <div class='txtbox'>
                        <p>Some text</p>
                    </div>
                </div>
                <div class='msgbox'>
                    <div class='txtbox'>
                        <p>Some text</p>
                    </div>
                </div>
                <div class='msgbox'>
                    <div class='txtbox'>
                        <p>Some text</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Many thanks! You helped me a lot! :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.