Set min-width to width of contents

user_1020018 0
Viewed 12428

I have a div with a background that contains a table. I want the div to have 100% width, except when that is narrower than the table is long. I can do something like this:

.my-div {
  width:100%;
  min-width:900px;
}

That's great for a table that is 900px wide, but if it is narrower than that, I will have unwanted scrollbars and if it is wider than that, I will have content that is unreachable. Obviously, this can trivially be solved with JavaScript, but I want to know if there is a CSS-only solution, so my application isn't so JS-heavy.

For a visual of what's happening, see here. What I want is for the green background to overflow the viewport when the text in the table does.

responsive css
5 Answers

If I understand your problem correctly, this should help:

.my-div {
  /*width:100%;*/
  height:400px;
  background-color:#bada55;
  display: inline-block; // this is the key
}

Your example modified here: http://jsfiddle.net/nvLnodLh/

user_13719950

What I want is for the green background to overflow the viewport when the text in the table does.

You just wrap a table inside a table, so they both overflow.

.my-div {
  width:100%;
  height:400px;
  display: table;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
}
table {
  width: 100%;
}
<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

If you don't want your container div to grow bigger than viewport just set the background on the table.

.my-div {
  width:100%;
  height:400px;
}
table {
  height: 100%;
  width: 100%;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
  vertical-align: top;
}
<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

user_17543520

Try with this solution

.my-div {
  height:400px;
  overflow: auto;
  background-color:#bada55;    
}
td {
  white-space:nowrap;   
}
table {
  width: 100%;
}
<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td>
          <td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

user_97991850
user_16369730
Related