【发布时间】：2016-08-14 09:43:40
【问题描述】：
类似Fixed Height and Changing Width for Header (HTML Table) 的问题 - 除了我想问：除了使用  而不是空格之外，还有其他方法可以实现这一点吗？基本上，我想增加表格数据单元格中的文本内容以保持单元格高度固定，而不是增加单元格宽度..
下面是一个最小的 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>
【问题讨论】：
标签： html css html-table