块元素消失水平滚动

后，我也有类似的这种情况代码：块元素消失水平滚动

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

块元素消失水平滚动

回答

相关问题