CODEWITHSUNDEEP
htmlcss
Somnium
Somnium

Reputation: 1155

CSS table right margin in scrollable div

I have div with "overflow: scroll" and fixed-size table inside.
I need to add empty space below and on the right of the table.
I'm using following code, however it adds space only below table, right margin doesn't work for some reason...

Is it possible without changing html structure?

<style>
  div{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
    overflow: scroll;
  }
  table{
    table-layout: fixed;
    background: red;
    margin-bottom: 20px; /* working */
    margin-right: 20px; /* not working */
  }
  td{
    min-width: 150px;
    max-width: 150px;
  }
</style>
<div>
  <table>
    <tr><td>a</td></tr>
    <tr><td>b</td></tr>
    <tr><td>c</td></tr>
    <tr><td>d</td></tr>
  </table>
</div>

JSFiddle: http://jsfiddle.net/7cdzh0cn/

Also I have tried adding paddings to DIV however they don't work - DIV only increases in size.

Note: I don't want change size of DIV or size of table - they should stay the same. Only thing I want to empty space inside DIV after table on the right and below it.

Upvotes: 4

Views: 2309

Answers (4)

Stickers
Stickers

Reputation: 78736

You could reset the default display:table to inline-table.

table {
  display: inline-table;
}


div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
    overflow: scroll;
}
table {
    display: inline-table;
    table-layout: fixed;
    background: red;
    margin-bottom: 20px;
    margin-right: 20px;
}
td {
    min-width: 150px;
    max-width: 150px;
}
<div>
    <table>
        <tr><td>a</td></tr>
        <tr><td>b</td></tr>
        <tr><td>c</td></tr>
        <tr><td>d</td></tr>
    </table>
</div>

Upvotes: 7

Jayababu
Jayababu

Reputation: 1621

Remove the width attribute for the div. Everything will work fine as expected.

div{
    display: inline-block;
    height: 100px;
    background: blue;
    overflow: scroll;
  }

Upvotes: 0

Ferrmolina
Ferrmolina

Reputation: 2771

The div, haven't the correct width. Adding 120px (20px to margin), and resizing the table to 100px this work.

CSS:

  div{
    display: inline-block;
    width: 120px; /* Updated*/
    height: 120px; /* Updated*/
    background: blue;
    overflow: scroll;
  }
  table{
    table-layout: fixed;
    background: red;
    margin-bottom: 20px; 
    margin-right: 20px; 
    width: 100px; /* added */
  }
  td{
    min-width: 150px;
    max-width: 150px;

  }

Demo

Upvotes: 0

mac shah
mac shah

Reputation: 1

you need to add padding-left in your table style

replace your table css

 table{
 table-layout: fixed;
 background: red;
 margin-bottom: 20px; /* working */
 margin-right: 20px; /* not working */
 padding-left: 23px;
}

here jsfiffle demo : http://jsfiddle.net/sL8zxLbn/

Upvotes: -1

Related Questions