生成的HTML表，我已经成功地间接改变了几个...除了这个特殊的 [英] Generated HTML tables that I've successfully changed several indirectly... except this particular one

问题描述

我的网站有这些交互式表格，在教师测试学生时由教师激活。后端由供应商控制，我是低度网络开发人员清理他们在前端的混乱，所以事情看起来可以呈现。我设法通过CSS和JS间接更改了几个表，但我不能直接应用任何东西到HTML直接到表，因为它是在页面加载时生成的。这个特别的表是令人困惑的，它不会缩小到720px。我尝试了 adddClass ， nth-child ，固定大小等等。我最后一次尝试是写一个函数将属性设置为td。它工作，它会显示在开发者工具，但实际的表没有收缩。我已经24小时以上，所以我可能只是累了，不知道简单的错误。无论如何，这里是我的演示。非常感谢任何帮助是非常感谢。

My site has these interactive tables that are inert until activated by an instructor when they are testing students. The backend is controlled by a vendor and I am the lowly web developer who cleans up their mess on the frontend so things look presentable. I've managed to change several tables indirectly through CSS and JS, but I can't apply anything to the HTML directly to the table since it's generated when the page loads. This particular table is perplexing,it will not shrink down to 720px. I tried everything from adddClass, nth-child, fixed sizes, etc. My last attempt was to write a function that set attributes to td's. It worked and it'll show on the developer tools but the actual table didn't shrink at all. I've been up 24+ hours so I might just be tired and not aware of simple mistakes. Anyways here's my demo. Thank you very much any help is very appreciated.

推荐答案

我刚刚发现：为什么我的表格单元格宽度错误在Chrome？
表有一个属性 table-layout ，它默认设置为 auto 。它允许表是灵活的，并赋予它在运行中分布列宽度的能力。以这种方式设置我的流氓表：

I just found this: Why is my table cell width wrong in Chrome? Tables have a property called table-layout which is by default set to auto. It allows the table to be flexible and gives it the ability to distribute column widths on the fly. Setting my rogue table this way:

table-layout: fixed; width: 100%

使它的行为和尊重我分配给它的宽度。有关表格布局的更多详情

made it behave and honor the widths I had assigned to it. Here's more details on table-layout

EDIT：我忘了提及这只会发生在Chrome，但在Firefox和一定程度的IE（它有点关闭，但这是你期望从一个半烤的工作），都没关系。这是新的解决方案演示

I forgot to mention that this only happens in Chrome, but in Firefox and to a certain extent IE (it's a little off, but that's what you'd expect from a half-baked piece of work), are ok. Here's the new demo with the solution

这篇关于生成的HTML表，我已经成功地间接改变了几个...除了这个特殊的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！