类似的问题,如Fixed Height and Changing Width for Header (HTML Table) - 除了我想问:除了使用
而不是空格之外,还有其他方法可以实现吗?基本上,我想增加表格数据单元格中的文本内容以保持单元格高度固定,而是增加单元格宽度。为固定高度的HTML表格数据单元增加宽度?
下面是一个最小的HTML示例,在更改浏览器(Firefox 43)宽度:
正如你可以看到,无论height
/max-height
说明书中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>
谢谢你,@tgallimore - 我已经更新了OP,回答了我们的问题;我一定会看看'table-layout:fixed;'和你发送的链接。干杯! – sdbbs