Question

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

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

如您所见，无论CSS中的height / max-height规范如何，表td字段都会增加其高度，同时减小宽度。

在这种情况下，我希望发生的是，td单元格的指定高度 - 以及相应的宽度 - 在浏览器宽度发生变化时保持不变，而更改的是底部滚动条。 / p>

有什么方法可以用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>

Answer 1

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

如果桌面单元的内容不合适，表格单元格总是会扩展它的高度，无论你设置的高度是多少（所以height在这种情况下可以用作min-height）。

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

Answer 2

您需要的是媒体查询

查看我的UPDATED FIDDLE

根据不同的分辨率（我只需1，根据您的需要进行调整），修正宽度table-layout: fixed;，您将获得解决方案。

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

2 个答案: