塊元素消失水平滾動

後，我也有類似的這種情況代碼：塊元素消失水平滾動

table { 
 
    table-layout: auto; 
 
    background-color: tomato; 
 
    border: 1 solid black; 
 
} 
 

 
.table-wrapper { 
 
    display: inline-block; 
 
} 
 

 
.tabs { 
 
    background-color: #00bcd4; 
 
}

<div> 
 
    <div class="tabs"> 
 
    smth 
 
    </div> 
 
    <div class="table-wrapper"> 
 
    <table> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Age</th> 
 
     <th>Sample</th> 
 
     <th>Sample</th> 
 
     <th>Sample</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill31222222</td> 
 
     <td>Smith12333333333333</td> 
 
     <td>5031231231231232</td> 
 
     <td>Jill31231231231</td> 
 
     <td>Smith312312312312</td> 
 
     <td>50312312312312312</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Eve12312312312</td> 
 
     <td>Jackson1233123123123123312</td> 
 
     <td>94312312312312</td> 
 
     <td>Jill312312312312</td> 
 
     <td>Smith312312312</td> 
 
     <td>5031233123123123</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

我有一個表table-layot: auto風格，細胞呈現非常大的文本。上表中顯示了選項卡。水平滾動tabs div被切斷後。根據桌子的寬度，是否有可能拉伸tabs div？

相關圖像：

來源

2017-12-27 Dasshield

你的意思是說，「smth」的div只有身體寬度？ –

使用[表格響應]（https://getbootstrap.com/docs/3.3/css/#tables-responsive）。 –

@MrLister是的，它的寬度對應於水平滾動初始狀態下的寬度。 – Dasshield

一個DIV（或具有任何display:block元件）僅一樣寬其容器。
所以一個解決方案是把它放在一個與桌子一樣寬的容器中。例如，桌子周圍的inline-block，它將自己伸展到正確的寬度。

.div-and-table-wrapper { 
 
    display:inline-block; 
 
    min-width:100%; 
 
} 
 

 
table { 
 
    table-layout: auto; 
 
    background-color: tomato; 
 
    border: 1 solid black; 
 
} 
 

 
.table-wrapper { 
 
    display: inline-block; 
 
} 
 

 
.tabs { 
 
    background-color: #00bcd4; 
 
}

<div class="div-and-table-wrapper"> 
 
    <div class="tabs"> 
 
    smth 
 
    </div> 
 
    <div class="table-wrapper"> 
 
    <table> 
 
     <tr> 
 
     <th>Firstname</th> 
 

 
     <th>Lastname</th> 
 
     <th>Age</th> 
 
     <th>Sample</th> 
 
     <th>Sample</th> 
 
     <th>Sample</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill31222222</td> 
 
     <td>Smith12333333333333</td> 
 
     <td>5031231231231232</td> 
 
     <td>Jill31231231231</td> 
 
     <td>Smith312312312312</td> 
 
     <td>50312312312312312</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Eve12312312312</td> 
 
     <td>Jackson1233123123123123312</td> 
 
     <td>94312312312312</td> 
 
     <td>Jill312312312312</td> 
 
     <td>Smith312312312</td> 
 
     <td>5031233123123123</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

（注：min-width就在那裏，以確保標籤的div將至少一樣寬的情況下，該表是窄的窗口
如果你不這樣做。。希望出現這種情況，也就是說，如果你想要的標籤的div始終是相同的寬度表，也許你最好把它變成一個caption）

來源

2017-12-27 15:07:31

您需要家長的寬度設定div到fit-content：

table { 
 
    table-layout: auto; 
 
    background-color: tomato; 
 
    border: 1 solid black; 
 
} 
 

 
.table-wrapper { 
 
    display: inline-block; 
 
} 
 

 
.tabs { 
 
    background-color: #00bcd4; 
 
} 
 

 
.tabs-wrapper { 
 
    width: fit-content; 
 
}

<div class="tabs-wrapper"> 
 
    <div class="tabs"> 
 
    smth 
 
    </div> 
 
    <div class="table-wrapper"> 
 
    <table> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Age</th> 
 
     <th>Sample</th> 
 
     <th>Sample</th> 
 
     <th>Sample</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill31222222</td> 
 
     <td>Smith12333333333333</td> 
 
     <td>5031231231231232</td> 
 
     <td>Jill31231231231</td> 
 
     <td>Smith312312312312</td> 
 
     <td>50312312312312312</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Eve12312312312</td> 
 
     <td>Jackson1233123123123123312</td> 
 
     <td>94312312312312</td> 
 
     <td>Jill312312312312</td> 
 
     <td>Smith312312312</td> 
 
     <td>5031233123123123</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

另一種方法是，如利斯特先生已經建議，使用inline-block代替fit-content。

來源

2017-12-27 15:08:03

塊元素消失水平滾動

回答

相關問題