块元素消失水平滚动

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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？

相关图像：

回答：

一个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）

回答：

您需要家长的宽度设定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。

以上是 块元素消失水平滚动 的全部内容， 来源链接： utcz.com/qa/265868.html

回到顶部