类似的问题,如固定高度和更改标题宽度(HTML 表) - 但我想问:除了使用
代替空格之外,还有其他方法可以实现此目的吗?基本上,我想增加表格数据单元格中的文本内容以保持单元格高度固定,而不是增加单元格宽度..
下面是一个最小的 HTML 示例,在更改浏览器 (Firefox 43) 宽度时其行为如下:
如您所见,无论 CSS 中的
height
/max-height
规范如何,表 td
字段都会增加其高度,同时减小宽度。
我希望发生的是在这种情况下,
td
单元格的指定高度和相应的宽度在浏览器宽度变化时保持不变,而变化的是底部滚动条。
有什么办法可以用 CSS 甚至 JS 来实现这一点吗?
回答@tgallimore的问题:
回应 @Leothelion 的帖子:我想指定固定高度
2em
(或者说,2.5em
),是因为我希望它能够为最多两行留出足够的垂直空间文本。所以我想要实现的是:
* 如果单元格中的文本很短(即一个单词),则不会换行,文本为单行,单元格高度为 2.5em
* 如果单元格中的文本很长(整个句子),那么我希望布局能够确定单元格高度为 2.5em
时最多可以容纳两行文本;此后它会尝试打破文本,使得两行中的字符数量大致相同(所以现在我们有一个“段落”;最后它将单元格的宽度设置为这个新断行的宽度“段落”。
换句话说,我想要这样的布局:...无论我如何缩放浏览器宽度;如果浏览器宽度太小,则仅水平滚动条调整。
<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 形成时,服务器代码知道将放入给定表格单元格的字符串的长度,对吧?因此我们可以使用该字符串长度在单元格上设置
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>