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

-1

我有一张固定右侧边栏的桌子。此右侧边栏现在具有420px的宽度。但宽度应该始终是内容的宽度。如何将div框的宽度设置为其内容的宽度？

我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; 
}

来源

2015-10-27 Jarla

表格布局是一种非常古老的布置网页的方法。它非常不灵活，并且有更好更快的响应选项。看看[** LearnLayout.com **]（http://learnlayout.com/） –

并检查datatables ... http://datatables.net/ –

谢谢，我会看看它绝对，但对于表格布局在这种情况下，是不是有解决办法？ – Jarla

轻松在侧边栏添加固定的类名来表并添加这个CSS：

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

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

来源

2015-10-27 10:09:22

嗨我试过你的解决方案，但有些不起作用。这里是你的结果：https://jsfiddle.net/nLdxcedv/14/ – Jarla

对不起，只是改变宽度为自动，所以对不起 –

它现在工作还是？ –

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

回答

相关问题