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

像 Fixed Height and Changing Width for Header (HTML Table)这样的类似问题 – 除了我想问：除了使用& nbsp;之外,还有不同的方法来实现这个目标吗？而不是空间？基本上,我想增加表数据单元格中的文本内容以保持单元格高度固定,而是增加单元格宽度.

下面是一个最小的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" 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>

解决方法

你能给桌子一个固定的宽度吗？
你知道你希望每个细胞保持多宽吗？这个宽度可以给每个细胞吗？

如果内容不适合,表格单元格将始终扩展其高度,无论您是否设置了高度(因此在这种情况下,高度将作为最小高度).

此外,您可能需要使用.mytbl {table-layout：fixed; }.这告诉表使用您定义的宽度,而不是尝试在每个单元格中修复它的内容.有关详细信息,请参阅此内容：https://css-tricks.com/fixing-tables-long-strings/

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

解决方法

相关推荐