如何使包含在 div 中的表格的 overflow-x 正常工作

huangapple go评论91阅读模式
英文:

How to get overflow-x working on tables inside div

问题

抱歉,只提供代码部分的翻译:

  1. <div>
  2. <div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
  3. <h2>ignores td width:</h2>
  4. <table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
  5. <tr>
  6. <td style="width:400px">asdf</td>
  7. <td style="width:400px">asdf</td>
  8. <td style="width:400px">asdf</td>
  9. <td style="width:400px">asdf</td>
  10. <td style="width:400px">asdf</td>
  11. <td style="width:400px">asdf</td>
  12. </tr>
  13. </table>
  14. </div>
  15. <div style="width:50%;background-color:#ccc" style="overflow-x:scroll">
  16. <h2>ignores overflow-x:</h2>
  17. <table border="1" width="2000px">
  18. <tr>
  19. <td style="width:400px">asdf</td>
  20. <td style="width:400px">asdf</td>
  21. <td style="width:400px">asdf</td>
  22. <td style="width:400px">asdf</td>
  23. <td style="width:400px">asdf</td>
  24. <td style="width:400px">asdf</td>
  25. </tr>
  26. </table>
  27. </div>
  28. </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 -->

  1. &lt;div&gt;
  2. &lt;div style=&quot;width:50%;background-color:#ccc&quot; style=&quot;overflow-x:hidden&quot;&gt;
  3. &lt;h2&gt;ignores td width:&lt;/h2&gt;
  4. &lt;table border=&quot;1&quot; width=&quot;100%&quot; style=&quot;display:block;table-layout:fixed;overflow-x:scroll&quot;&gt;
  5. &lt;tr&gt;
  6. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  7. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  8. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  9. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  10. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  11. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  12. &lt;/tr&gt;
  13. &lt;/table&gt;
  14. &lt;/div&gt;
  15. &lt;div style=&quot;width:50%;background-color:#ccc&quot; style=&quot;overflow-x:scroll&quot;&gt;
  16. &lt;h2&gt;ignores overflow-x:&lt;/h2&gt;
  17. &lt;table border=&quot;1&quot; width=&quot;2000px&quot;&gt;
  18. &lt;tr&gt;
  19. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  20. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  21. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  22. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  23. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  24. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  25. &lt;/tr&gt;
  26. &lt;/table&gt;
  27. &lt;/div&gt;
  28. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

对于一个HTML标签,只使用一个样式属性,使用太多样式属性除了第一个之外会失去功能,但可以为一个标签使用多个类。

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;style&gt;
  4. &lt;/style&gt;
  5. &lt;/head&gt;
  6. &lt;body&gt;
  7. &lt;h1&gt;如何使x滚动工作?&lt;/h1&gt;
  8. &lt;div&gt;
  9. &lt;div style=&quot;width:50%;background-color:#ccc;overflow-x:hidden&quot;&gt;
  10. &lt;h2&gt;忽略了td宽度:&lt;/h2&gt;
  11. &lt;table border=&quot;1&quot; width=&quot;100%&quot; style=&quot;display:block;table-layout:fixed;overflow-x:scroll&quot;&gt;
  12. &lt;tr&gt;
  13. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  14. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  15. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  16. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  17. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  18. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  19. &lt;/tr&gt;
  20. &lt;/table&gt;
  21. &lt;/div&gt;
  22. &lt;div style=&quot;width:50%;background-color:#ccc;overflow-x:scroll&quot;&gt;
  23. &lt;h2&gt;忽略了overflow-x:&lt;/h2&gt;
  24. &lt;table border=&quot;1&quot; width=&quot;2000px&quot;&gt;
  25. &lt;tr&gt;
  26. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  27. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  28. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  29. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  30. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  31. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  32. &lt;/tr&gt;
  33. &lt;/table&gt;
  34. &lt;/div&gt;
  35. &lt;/div&gt;
  36. &lt;/body&gt;
  37. &lt;/html&gt;
英文:

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

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;style&gt;
  4. &lt;/style&gt;
  5. &lt;/head&gt;
  6. &lt;body&gt;
  7. &lt;h1&gt;How to get x-scroll working?&lt;/h1&gt;
  8. &lt;div&gt;
  9. &lt;div style=&quot;width:50%;background-color:#ccc;overflow-x:hidden&quot;&gt;
  10. &lt;h2&gt;ignores td width:&lt;/h2&gt;
  11. &lt;table border=&quot;1&quot; width=&quot;100%&quot; style=&quot;display:block;table-layout:fixed;overflow-x:scroll&quot;&gt;
  12. &lt;tr&gt;
  13. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  14. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  15. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  16. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  17. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  18. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  19. &lt;/tr&gt;
  20. &lt;/table&gt;
  21. &lt;/div&gt;
  22. &lt;div style=&quot;width:50%;background-color:#ccc;overflow-x:scroll&quot;&gt;
  23. &lt;h2&gt;ignores overflow-x:&lt;/h2&gt;
  24. &lt;table border=&quot;1&quot; width=&quot;2000px&quot;&gt;
  25. &lt;tr&gt;
  26. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  27. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  28. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  29. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  30. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  31. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  32. &lt;/tr&gt;
  33. &lt;/table&gt;
  34. &lt;/div&gt;
  35. &lt;/div&gt;
  36. &lt;/body&gt;
  37. &lt;/html&gt;

答案2

得分: 1

Change:

  1. style="width:50%;background-color:#ccc" style="overflow-x:scroll"

To:

  1. style="width:50%;background-color:#ccc; overflow-x:auto"

Error: 你在一个单一的标签中使用了2个样式,另外使用 auto 而不是 scroll

英文:

Change:

  1. style=&quot;width:50%;background-color:#ccc&quot; style=&quot;overflow-x:scroll&quot;

To :

  1. style=&quot;width:50%;background-color:#ccc; overflow-x:auto&quot;

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"

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  2. <!-- language: lang-html -->
  3. <div>
  4. <div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
  5. <h2>忽略td的宽度:</h2>
  6. <table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
  7. <tr>
  8. <td style="width:400px">asdf</td>
  9. <td style="width:400px">asdf</td>
  10. <td style="width:400px">asdf</td>
  11. <td style="width:400px">asdf</td>
  12. <td style="width:400px">asdf</td>
  13. <td style="width:400px">asdf</td>
  14. </tr>
  15. </table>
  16. </div>
  17. <div style="width:50%;background-color:#ccc;overflow-x:auto;">
  18. <h2>忽略overflow-x:</h2>
  19. <table border="1" width="2000px">
  20. <tr>
  21. <td style="width:400px">asdf</td>
  22. <td style="width:400px">asdf</td>
  23. <td style="width:400px">asdf</td>
  24. <td style="width:400px">asdf</td>
  25. <td style="width:400px">asdf</td>
  26. <td style="width:400px">asdf</td>
  27. </tr>
  28. </table>
  29. </div>
  30. </div>
  31. <!-- 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 -->

  1. &lt;div&gt;
  2. &lt;div style=&quot;width:50%;background-color:#ccc&quot; style=&quot;overflow-x:hidden&quot;&gt;
  3. &lt;h2&gt;ignores td width:&lt;/h2&gt;
  4. &lt;table border=&quot;1&quot; width=&quot;100%&quot; style=&quot;display:block;table-layout:fixed;overflow-x:scroll&quot;&gt;
  5. &lt;tr&gt;
  6. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  7. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  8. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  9. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  10. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  11. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  12. &lt;/tr&gt;
  13. &lt;/table&gt;
  14. &lt;/div&gt;
  15. &lt;div style=&quot;width:50%;background-color:#ccc;overflow-x:auto;&quot;&gt;
  16. &lt;h2&gt;ignores overflow-x:&lt;/h2&gt;
  17. &lt;table border=&quot;1&quot; width=&quot;2000px&quot;&gt;
  18. &lt;tr&gt;
  19. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  20. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  21. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  22. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  23. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  24. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  25. &lt;/tr&gt;
  26. &lt;/table&gt;
  27. &lt;/div&gt;
  28. &lt;/div&gt;

<!-- end snippet -->

答案4

得分: 1

以下是翻译好的部分:

  • 合并您div中的样式标签,并使用 overflow: auto
  • 从您的表格中删除 display block
  • 删除宽度 width 为 100%,并将固定宽度添加到表格的样式标签中,宽度为列宽之和
  1. <div style="width: 50%; background-color: #ccc; overflow-x: auto">
  2. <h2>doesn't ignore td width:</h2>
  3. <table border="1" style="table-layout: fixed; width: 2400px">
  4. <tr>
  5. <td style="width: 400px">asdf</td>
  6. <td style="width: 400px">asdf</td>
  7. <td style="width: 400px">asdf</td>
  8. <td style="width: 400px">asdf</td>
  9. <td style="width: 400px">asdf</td>
  10. <td style="width: 400px">asdf</td>
  11. </tr>
  12. </table>
  13. </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 -->

  1. &lt;div style=&quot;width:50%;background-color:#ccc;overflow-x:auto&quot;&gt;
  2. &lt;h2&gt;doesn&#39;t ignore td width:&lt;/h2&gt;
  3. &lt;table border=&quot;1&quot; style=&quot;table-layout:fixed; width:2400px&quot;&gt;
  4. &lt;tr&gt;
  5. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  6. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  7. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  8. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  9. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  10. &lt;td style=&quot;width:400px&quot;&gt;asdf&lt;/td&gt;
  11. &lt;/tr&gt;
  12. &lt;/table&gt;
  13. &lt;/div&gt;

<!-- 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 -->

  1. <div style="width:50%;background-color:#ccc; overflow-x:auto">
  2. <h2>ignores td width:</h2>
  3. <table border="1" style="table-layout:fixed; width: 100%">
  4. <tr>
  5. <td style="width:400px !important">asdf</td>
  6. <td style="width:400px !important">asdf</td>
  7. <td style="width:400px !important">asdf</td>
  8. <td style="width:400px !important">asdf</td>
  9. <td style="width:400px !important">asdf</td>
  10. <td style="width:400px !important">asdf</td>
  11. </tr>
  12. </table>
  13. </div>
  14. <div style="width:50%;background-color:#ccc; overflow-x:auto">
  15. <h2>ignores overflow-x:</h2>
  16. <table border="1" width="2000px">
  17. <tr>
  18. <td>asdf</td>
  19. <td>asdf</td>
  20. <td>asdf</td>
  21. <td>asdf</td>
  22. <td>asdf</td>
  23. <td>asdf</td>
  24. </tr>
  25. </table>
  26. </div>
  27. </div>```
  28. ```<!-- end snippet -->```
  29. <details>
  30. <summary>英文:</summary>
  31. If you want to apply the fixed width to the ```&lt;td&gt;``` then you must assign any width to the ```&lt;table&gt;``` tag **width:100%** ideally with **table-layout: fixed** and it is not the ```&lt;table&gt;``` tag which handles the overflow it is actually the parent ```&lt;div&gt;``` tag so you must set **overflow-x: auto/scroll** to the direct parent of your table.
  32. On the other hand you can also assign the fixed width to the ```&lt;table&gt;``` tag like 2000px without setting it&#39;s table-layout to fixed, the ```&lt;td&gt;``` tags will get the equally divided width or if the content is small or will adjust the width automatically according the content available in ```&lt;td&gt;``` tags or you can still assign extra width to any specific ```&lt;td&gt;``` tag, i hope you get it.
  33. &lt;!-- begin snippet: js hide: false console: true babel: null --&gt;
  34. &lt;!-- language: lang-html --&gt;
  35. &lt;div&gt;
  36. &lt;div style=&quot;width:50%;background-color:#ccc; overflow-x:auto&quot;&gt;
  37. &lt;h2&gt;ignores td width:&lt;/h2&gt;
  38. &lt;table border=&quot;1&quot; style=&quot;table-layout:fixed; width: 100%&quot;&gt;
  39. &lt;tr&gt;
  40. &lt;td style=&quot;width:400px !important&quot;&gt;asdf&lt;/td&gt;
  41. &lt;td style=&quot;width:400px !important&quot;&gt;asdf&lt;/td&gt;
  42. &lt;td style=&quot;width:400px !important&quot;&gt;asdf&lt;/td&gt;
  43. &lt;td style=&quot;width:400px !important&quot;&gt;asdf&lt;/td&gt;
  44. &lt;td style=&quot;width:400px !important&quot;&gt;asdf&lt;/td&gt;
  45. &lt;td style=&quot;width:400px !important&quot;&gt;asdf&lt;/td&gt;
  46. &lt;/tr&gt;
  47. &lt;/table&gt;
  48. &lt;/div&gt;
  49. &lt;div style=&quot;width:50%;background-color:#ccc; overflow-x:auto&quot;&gt;
  50. &lt;h2&gt;ignores overflow-x:&lt;/h2&gt;
  51. &lt;table border=&quot;1&quot; width=&quot;2000px&quot;&gt;
  52. &lt;tr&gt;
  53. &lt;td&gt;asdf&lt;/td&gt;
  54. &lt;td&gt;asdf&lt;/td&gt;
  55. &lt;td&gt;asdf&lt;/td&gt;
  56. &lt;td&gt;asdf&lt;/td&gt;
  57. &lt;td&gt;asdf&lt;/td&gt;
  58. &lt;td&gt;asdf&lt;/td&gt;
  59. &lt;/tr&gt;
  60. &lt;/table&gt;
  61. &lt;/div&gt;
  62. &lt;/div&gt;
  63. &lt;!-- end snippet --&gt;
  64. </details>

huangapple
  • 本文由 发表于 2023年3月15日 19:00:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/75743811.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定