Clever Geek Handbook

Right edge of CSS table in scrollable div

I have a div with "overflow: scrolling" and a fixed size table inside.
I need to add white space below and to the right of the table.
I am using the following code, however it only adds space under the table, the right pane doesn't work for some reason ...

Is this possible without changing the 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 tried adding paddings to the DIV, but they don't work - the DIV only grows in size.

Note . I don't want to resize the DIV or the size of the table - they must remain the same. The only thing I want is the white space inside the DIV after the table on the right and below.

+3


source to share


4 answers


You can 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>
Run code


+4


source


div

not correct width

. Adding 120px

( 20px

in margin) and resizing the table before 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;

  }

0


source


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

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


source


you need to add padding-left in the table style

replace the css table

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

here's the jsfiffle demo: http://jsfiddle.net/sL8zxLbn/

-1


source






More articles:


All Articles