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

Question

&nbsp;

代替空格之外，还有其他方法可以实现此目的吗？基本上，我想增加表格数据单元格中的文本内容以保持单元格高度固定，而不是增加单元格宽度..

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

如您所见，无论 CSS 中的

height

/

max-height

规范如何，表

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>

Answer 1

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

如果内容不适合，表格单元格总是会扩展其高度，无论您是否设置高度（因此在这种情况下，

height

将用作

min-height

）。

此外，您可能需要使用

.mytbl { table-layout: fixed; }

。这告诉表格使用您定义的宽度，而不是尝试修复每个单元格中的内容。有关更多信息，请参阅：

https://css-tricks.com/fixing-tables-long-strings/

Answer 2

您需要的是

媒体查询

查看我的

更新的小提琴

在不同的分辨率下（我只取了1，根据你的需要调整），固定宽度和

table-layout: fixed;

，你就会得到你的解决方案。

Answer 3

我也有类似的需求。在未能找到纯 HTML/CSS 解决方案之后，我利用了服务器端对代码的控制，并认为分享这个概念可能会有用。

当 HTML 形成时，服务器代码知道将放入给定表格单元格的字符串的长度，对吧？因此我们可以使用该字符串长度在单元格上设置

min-width

。它需要一些手动微调，因为不同的字体需要不同的除数。

希望有帮助。请参阅基于 WordPress 的示例进行说明：

<?php
$table_data = [
    'A1',
    'Just testing some longer content here, so long that it might not fit on a single line',
    'Molybdenum',
    'D1',
    'Scanty Distensibility',
    'Arithmetical',
    'G1',
    'Hypallelomorph',
];

foreach ( $table_data as $data ) {
    $divisor   = 4; // Depends on the font styles applied to the table
    $length    = mb_strlen( $data ); // Cell content length
    $min_width = round( $length / $divisor );
    $min_width = $min_width . 'em'; // Make min-width relative to font-size
    echo "<td style='min-width: $min_width'>$data</td>" . PHP_EOL;
}

所以你的测试 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 style='min-width: 1em'>A1</td>
          <td style='min-width: 21em'>Just testing some longer content here, so long that it might not fit on a single line</td>
          <td style='min-width: 3em'>Molybdenum</td>
          <td style='min-width: 1em'>D1</td>
          <td style='min-width: 5em'>Scanty Distensibility</td>
          <td style='min-width: 3em'>Arithmetical</td>
          <td style='min-width: 1em'>G1</td>
          <td style='min-width: 4em'>Hypallelomorph</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

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

问题描述投票：0回答：3

3个回答

最新问题

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

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3