下面是一个最小的HTML示例,在更改浏览器(firefox 43)宽度时的行为如下：
如您所见,无论CSS中的高度/最大高度规格如何,表格td字段都会增加其高度,同时减小宽度.
我想要发生的是在这种情况下,td单元格的指定高度 – 以及相应的宽度 – 在浏览器宽度改变时保持不变,而改变的是底部滚动条.
有什么方法可以用CSS,甚至Js来实现这个目标吗？
针对@tgallimore的问题：
>你能给桌子一个固定的宽度吗？ – 不,我希望根据内容调整宽度
>你知道你希望每个细胞保留多宽吗？ – 不,我希望它有一个固定的宽度,然后如果它足够两行文本,这些应调整为最佳宽度(即每行有大约相同的文本量)
>这个宽度可以给每个细胞吗？ – 否,单元格将具有不同的文本内容,如示例中所示
回应@Leothelion的帖子：我想指定2em的固定高度(或者说,2.5em),因为我希望它能够为最多两行文本留出足够的垂直空间.所以我想要实现的目标是：
*如果单元格中的文本很短(即一个单词),则表示没有换行符,文本单行,单元格高度为2.5em
*如果单元格中的文本很长(整个句子),那么我希望布局能够确定单元格高度为2.5em,它最多可以容纳两行文本;之后它会尝试打破文本,使得两行中的字符数量大致相同(所以现在我们有一个“段落”;最后它会将单元格的宽度设置为这个新断行的宽度“段”.
换句话说,我想要这个布局：
…无论我如何缩放浏览器宽度;如果浏览器宽度太小,则只调整水平滚动条.
示例HTML代码：
<HTML><head> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8"/> <script type="text/JavaScript" src="../jquery-1.12.3.min.Js"></script> <style type="text/CSS">.mytbl,.mytbl tr th,.mytbl tr td { border-style: solID; border-color: #000; border-spacing: 0; border-collapse: collapse; padding: 4px; border-wIDth: 1px; Font: 12px helvetica,arial,sans-serif;}.mytbl tr td { height: 2em; max-height: 2em;}.mtytblwrap { border-wIDth: 1px; border-color: #000; padding: 4px; overflow: auto; overflow-y: hIDden;} </style> <script type="text/JavaScript">ondocready = function() { // placeholder - nothing for Now...}$(document).ready(ondocready); </script></head><body> <h1>Hello World!</h1> <div ID="wrapper1" > <table ID="table1" > <thead> <tr> <th> Dendrologist </th> <th> Iciness </th> <th> Joyfuldistortion </th> <th> Suburbicarian </th> <th> Ecballium </th> <th> AbulicNonviolence </th> <th> GrowlerTheocracy </th> <th> Necessitattion </th> </tr> </thead> <tbody> <tr> <td> A1 </td> <td> Just testing some longer content here,so long that it might not fit on a single line </td> <td> Molybdenum </td> <td> D1 </td> <td> Scanty distensibility </td> <td> Arithmetical </td> <td> G1 </td> <td> Hypallelomorph </td> </tr> </tbody> </table> </div></body></HTML>解决方法 你能给桌子一个固定的宽度吗？ 你知道你希望每个细胞保持多宽吗？这个宽度可以给每个细胞吗？
如果内容不适合,表格单元格将始终扩展其高度,无论您是否设置了高度(因此在这种情况下,高度将作为最小高度).
此外,您可能需要使用.mytbl {table-layout：fixed; }.这告诉表使用您定义的宽度,而不是尝试在每个单元格中修复它的内容.有关详细信息,请参阅此内容：https://css-tricks.com/fixing-tables-long-strings/
总结以上是内存溢出为你收集整理的增加固定高度HTML表数据单元格的宽度？全部内容，希望文章能够帮你解决增加固定高度HTML表数据单元格的宽度？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）