如何將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框的寬度設置爲其內容的寬度？

回答

相關問題