为固定高度的HTML表格数据单元增加宽度？

类似的问题，如Fixed Height and Changing Width for Header (HTML Table) - 除了我想问：除了使用 而不是空格之外，还有其他方法可以实现吗？基本上，我想增加表格数据单元格中的文本内容以保持单元格高度固定，而是增加单元格宽度。为固定高度的HTML表格数据单元增加宽度？

下面是一个最小的HTML示例，在更改浏览器（Firefox 43）宽度：

正如你可以看到，无论height/max-height说明书中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" class="mtytblwrap"> 
    <table id="table1" class="mytbl"> 
     <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>

来源

2016-04-21 sdbbs

您是否能给出一个固定的宽度表？你知道你希望每个细胞有多宽吗？这个宽度可以给每个细胞吗？

如果内容不合适，表格单元格将始终扩展其高度，无论您是否设置了高度（因此height在这种情况下将作为min-height）。您可能需要使用.mytbl { table-layout: fixed; }。这会告诉表格使用您定义的宽度，而不是尝试修复每个单元格中的内容。更多信息请参阅本：https://css-tricks.com/fixing-tables-long-strings/

来源

2016-04-21 09:37:35

谢谢你，@tgallimore - 我已经更新了OP，回答了我们的问题;我一定会看看'table-layout：fixed;'和你发送的链接。干杯! – sdbbs

你需要的是媒体查询

见我UPDATED FIDDLE

在不同的分辨率（我只用了1个，根据您的需要调整），固定宽度和，你会得到你的解决方案。

来源

2016-04-21 09:39:08

非常感谢那个@Leothelion - 但据我所见，你的小提琴不会固定细胞高度来说2em，它是做什么的，而是固定桌子的宽度，然后设置每个细胞分享平等的宽度 - 这是一个有趣的解决方案，但不是我正在寻找的......干杯！ – sdbbs

oohh.sorry如果它不给你完美的答案:( –

没问题，@Leothelion - 这仍然是一个参考您发布的解决方案，欢呼！ – sdbbs

为固定高度的HTML表格数据单元增加宽度？

回答

相关问题