如何将div框的宽度设置为其内容的宽度？

Question

我有一张带有固定右侧边栏的桌子。这个右侧边栏现在的宽度为420px。但宽度应始终是内容的宽度。

https://jsfiddle.net/nLdxcedv/10/

我用auto尝试过，但是固定右侧的设计不再适用了。你有什么想法吗？

以下是代码：

<div id="wrapper">
    <div id="content" style="overflow-x:scroll">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>

                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>                
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                </tr>
            </thead>
            <tbody>

<tr> <td>Lorem ipsum</td><td>Lorem ipsum </td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum<br><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum </td><td> Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td></tr> <tr> <td>Lorem ipsum</td><td>Lorem ipsum </td><td>Lorem ipsum</td><td>Lorem ipsum</td><td><td>Lorem ipsum</td><td>Lorem ipsum</td><td> </td><td> Lorem ipsum</td><td>Lorem ipsum</td><td></td><td></td><td></td></tr>          

              </tbody>
            </table>
        </div>



            <div id="sidebar">
                 <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Lorem ipsum</th>
                        </tr>
                    </thread>
                <tbody>     

                <tr><th>Lorem ipsum<tr><th>Lorem ipsum  </tbody>
    </table>
    </div>
<div id="cleared"></div>

和css：

body{padding:40px;}
table{font-size:13px;white-space: nowrap;}
.container{padding:0px}



#content {
  float: left;
  width: 100%;
}
#sidebar {
  float: right;
  width: 420px;
  margin-right: -420px;
}  
#wrapper {

  margin-right: 240px;
}
#sidebar {
  float: right;
  width: 240px;
  margin-right: -240px;
}  
#cleared {
  clear: both;
}

Answer 1

轻松将固定类名添加到侧栏中的表并添加此css：

.fixed {
 table-layout: fixed;
 width: auto;
}

<div id="sidebar">
<table class="fixed table table-striped table-bordered">