英文:
How to avoid td width expanding when it wrapped with enabled overflow and big div inside
问题
我有一个包含2列的表格，第一列应该占25%的宽度，第二列应该占75%的宽度。
在第二列中，有时会有大内容，因此我在里面创建了一个带有overflow: scroll的div，并在该包装div内创建了大内容，但由于某种原因，它会扩展整个第二个td列，例如：
<div class="content">
<table>
<tr>
<td class="col1">Hello<td>
<td class="col2">World</td>
</tr>
<tr>
<td class="col1">big field<td>
<td class="col2">
<div class="wrapper">
<div class="big_content">some big content here</div>
</div>
</td>
</tr>
</table>
</div>
我如何防止第二列由于包含大内容而扩展？因为我将大内容包装在具有overflow: scroll的另一个div（.wrap）中。
英文:
I have a table with 2 columns, the first one should be 25% wide width and and 2nd one should be 75% wide.
In the 2nd column, sometimes there's big content, therefore, I made a div inside with overflow: scroll and inside that wrap div I made the big content, but from some reason, it expands the full 2nd td column, an example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
table {
background: red;
width: 100%;
}
.col1 {
width: 25%;
background: green;
}
.col2 {
width: 75%;
background: skyblue;
}
.wrapper {
width: 100%;
height: 200px;
overflow: scroll;
}
.big_content {
width: 2000px;
height: 500px;
}
<!-- language: lang-html -->
<div class="content">
<table>
<tr>
<td class="col1">Hello<td>
<td class="col2">World</td>
</tr>
<tr>
<td class="col1">big field<td>
<td class="col2">
<div class="wrapper">
<div class="big_content">some big content here</div>
</div>
</td>
</tr>
</table>
</div>
<!-- end snippet -->
How can I avoid the 2nd column from being expanded due to the big content it has? because I wrapped that big content inside another div (.wrap) that has overflow: scroll
答案1
得分: 1
使用table-layout:fixed来设置表格的布局：
table {
background: red;
width: 100%;
table-layout: fixed;
}
.col1 {
width: 25%;
background: green;
}
.col2 {
width: 75%;
background: skyblue;
}
.wrapper {
width: 100%;
height: 200px;
overflow: scroll;
}
.big_content {
width: 2000px;
height: 500px;
}
<div class="content">
<table>
<tr>
<td class="col1">Hello<td>
<td class="col2">World</td>
</tr>
<tr>
<td class="col1">big field<td>
<td class="col2">
<div class="wrapper">
<div class="big_content">some big content here</div>
</div>
</td>
</tr>
</table>
</div>
英文:
use table-layout:fixed for table:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
table {
background: red;
width: 100%;
table-layout:fixed
}
.col1 {
width: 25%;
background: green;
}
.col2 {
width: 75%;
background: skyblue;
}
.wrapper {
width: 100%;
height: 200px;
overflow: scroll;
}
.big_content {
width: 2000px;
height: 500px;
}
<!-- language: lang-html -->
<div class="content">
<table>
<tr>
<td class="col1">Hello<td>
<td class="col2">World</td>
</tr>
<tr>
<td class="col1">big field<td>
<td class="col2">
<div class="wrapper">
<div class="big_content">some big content here</div>
</div>
</td>
</tr>
</table>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论