英文:
How to get overflow-x working on tables inside div
问题
抱歉，只提供代码部分的翻译：
<div>
<div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
<h2>ignores td width:</h2>
<table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
<div style="width:50%;background-color:#ccc" style="overflow-x:scroll">
<h2>ignores overflow-x:</h2>
<table border="1" width="2000px">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
</div>
请注意，原始文本中存在一些 HTML 属性重复的错误，可能需要修复。
英文:
Sorry but just can't get this working, thankful for any advices,
in example below the browser either ignores the td-width or expands outside the container-div:
Example available at: https://jsfiddle.net/tomjoad2000/1jn9b2f7/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div>
<div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
<h2>ignores td width:</h2>
<table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
<div style="width:50%;background-color:#ccc" style="overflow-x:scroll">
<h2>ignores overflow-x:</h2>
<table border="1" width="2000px">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
对于一个HTML标签，只使用一个样式属性，使用太多样式属性除了第一个之外会失去功能，但可以为一个标签使用多个类。
<html>
<head>
<style>
</style>
</head>
<body>
<h1>如何使x滚动工作？</h1>
<div>
<div style="width:50%;background-color:#ccc;overflow-x:hidden">
<h2>忽略了td宽度：</h2>
<table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
<div style="width:50%;background-color:#ccc;overflow-x:scroll">
<h2>忽略了overflow-x：</h2>
<table border="1" width="2000px">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
</div>
</body>
</html>
英文:
Use only one style property for a html tag ，too many styles will lose function beside the first one , but you can use more class for a tag
<html>
<head>
<style>
</style>
</head>
<body>
<h1>How to get x-scroll working?</h1>
<div>
<div style="width:50%;background-color:#ccc;overflow-x:hidden">
<h2>ignores td width:</h2>
<table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
<div style="width:50%;background-color:#ccc;overflow-x:scroll">
<h2>ignores overflow-x:</h2>
<table border="1" width="2000px">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
</div>
</body>
</html>
答案2
得分: 1
Change:
style="width:50%;background-color:#ccc" style="overflow-x:scroll"
To:
style="width:50%;background-color:#ccc; overflow-x:auto"
Error: 你在一个单一的标签中使用了2个样式，另外使用 auto 而不是 scroll。
英文:
Change:
style="width:50%;background-color:#ccc" style="overflow-x:scroll"
To :
style="width:50%;background-color:#ccc; overflow-x:auto"
Error: you are using 2 styles in a single tag additionally use auto instead of scroll
答案3
得分: 1
请更改您的CSS。您可以使用两次样式标签。
将：
style="width:50%;background-color:#ccc" style="overflow-x:scroll"
更改为：
style="width:50%;background-color:#ccc;overflow-x:auto"
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div>
<div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
<h2>忽略td的宽度:</h2>
<table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
<div style="width:50%;background-color:#ccc;overflow-x:auto;">
<h2>忽略overflow-x:</h2>
<table border="1" width="2000px">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
</div>
<!-- end snippet -->
英文:
Please change your css. you can used two time style tag.
style="width:50%;background-color:#ccc" style="overflow-x:scroll"
to
**style="width:50%;background-color:#ccc;overflow-x:auto" **
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div>
<div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
<h2>ignores td width:</h2>
<table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
<div style="width:50%;background-color:#ccc;overflow-x:auto;">
<h2>ignores overflow-x:</h2>
<table border="1" width="2000px">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
</div>
<!-- end snippet -->
答案4
得分: 1
以下是翻译好的部分：
- 合并您
div中的样式标签，并使用overflow: auto - 从您的表格中删除
display block - 删除宽度
width为 100%，并将固定宽度添加到表格的样式标签中，宽度为列宽之和
<div style="width: 50%; background-color: #ccc; overflow-x: auto">
<h2>doesn't ignore td width:</h2>
<table border="1" style="table-layout: fixed; width: 2400px">
<tr>
<td style="width: 400px">asdf</td>
<td style="width: 400px">asdf</td>
<td style="width: 400px">asdf</td>
<td style="width: 400px">asdf</td>
<td style="width: 400px">asdf</td>
<td style="width: 400px">asdf</td>
</tr>
</table>
</div>
英文:
I would do the following:
- merge your style tags in your div and use
overflow: auto - remove the display block from your table
- remove the width 100% and add the fixed width as the sum of your column widths to the style tag of the table
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div style="width:50%;background-color:#ccc;overflow-x:auto">
<h2>doesn't ignore td width:</h2>
<table border="1" style="table-layout:fixed; width:2400px">
<tr>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
<td style="width:400px">asdf</td>
</tr>
</table>
</div>
<!-- end snippet -->
答案5
得分: 1
如果您想将固定宽度应用于<td>，那么您必须为<table>标签分配任何宽度，最好是width:100%，并使用table-layout: fixed，实际上处理溢出的不是<table>标签，而是实际上是父级<div>标签，因此您必须为表格的直接父级设置overflow-x: auto/scroll。
另一方面，您还可以将固定宽度分配给<table>标签，例如2000px，而不设置其table-layout为fixed，<td>标签将获得等宽度分配，或者如果内容较小，将根据<td>标签中可用的内容自动调整宽度，或者仍然可以为任何特定的<td>标签分配额外的宽度，希望您明白了。
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<div style="width:50%;background-color:#ccc; overflow-x:auto">
<h2>ignores td width:</h2>
<table border="1" style="table-layout:fixed; width: 100%">
<tr>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
</tr>
</table>
</div>
<div style="width:50%;background-color:#ccc; overflow-x:auto">
<h2>ignores overflow-x:</h2>
<table border="1" width="2000px">
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
</table>
</div>
</div>```
```<!-- end snippet -->```
<details>
<summary>英文:</summary>
If you want to apply the fixed width to the ```<td>``` then you must assign any width to the ```<table>``` tag **width:100%** ideally with **table-layout: fixed** and it is not the ```<table>``` tag which handles the overflow it is actually the parent ```<div>``` tag so you must set **overflow-x: auto/scroll** to the direct parent of your table.
On the other hand you can also assign the fixed width to the ```<table>``` tag like 2000px without setting it's table-layout to fixed, the ```<td>``` tags will get the equally divided width or if the content is small or will adjust the width automatically according the content available in ```<td>``` tags or you can still assign extra width to any specific ```<td>``` tag, i hope you get it.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<div>
<div style="width:50%;background-color:#ccc; overflow-x:auto">
<h2>ignores td width:</h2>
<table border="1" style="table-layout:fixed; width: 100%">
<tr>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
<td style="width:400px !important">asdf</td>
</tr>
</table>
</div>
<div style="width:50%;background-color:#ccc; overflow-x:auto">
<h2>ignores overflow-x:</h2>
<table border="1" width="2000px">
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
</table>
</div>
</div>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论