英文:
How to avoid td width expanding when it wrapped with enabled overflow and big div inside
问题
我有一个有两列的表格，第一列应该是宽度的25%，第二列应该是宽度的75%。
在第二列中，有时会有很大的内容，因此我在内部使用了一个带有overflow: scroll的div，并在其中包裹了大的内容。但出于某种原因，它会扩展到整个第二个td列，以下是一个示例：
<!-- 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 -->
我该如何避免第二列因为它包含的大内容而扩展？因为我将那个大的内容包裹在另一个具有overflow: scroll的div（.wrapper）中。
英文:
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来设置表格的布局：
<!-- 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 -->
请注意，这只是一个示例代码，你可以根据自己的需求进行修改。
英文:
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论