个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
30
4
类似的问题 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)，因为我希望它能为 max 留出足够的垂直空间两行文字。所以我想要实现的是:* 如果单元格中的文本很短(即一个单词)，则没有换行，文本为单行，单元格高度为 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>
最佳答案
你能给表格一个固定的宽度吗？您知道您希望每个单元格保持多宽吗？这个宽度可以给每个cell吗？
如果内容不适合，表格单元格总是会扩展其高度，无论您是否设置高度(因此 height 在这种情况下可以用作 最小高度).
此外，您可能需要使用 .mytbl { table-layout: fixed; }。这告诉表格使用您定义的宽度，而不是尝试在每个单元格中修复它的内容。有关更多信息，请参见:https://css-tricks.com/fixing-tables-long-strings/
关于html - 增加固定高度 HTML 表格数据单元格的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36765375/
30
4
0
我已经尝试在我的 CSS 中添加一个元素来删除每三个 div 的 margin-right。不过，似乎只是出于某种原因影响了第 3 次和第 7 次。需要它在第 3、6、9 等日工作... CSS .s
如何使 div/input 闪烁或“脉冲”？例如，假设表单字段输入了无效值？ 最佳答案 使用 CSS3 类似 on this page ，您可以将脉冲效果添加到名为 error 的类中: @-webk
我目前正在尝试构建一个简单的 wireframe来自 lattice 的情节包，但由沿 y 轴的数百个点组成。这导致绘图被线框网格淹没，您看到的只是一个黑色块。我知道我可以用 col=FALSE 完全
在知道 parent>div CSS 选择器在 IE 中无法识别后，我重新编码我的 CSS 样式，例如: div#bodyMain div#paneLeft>div{/*styles here*/}
我有两个 div，一个在另一个里面。当我将鼠标悬停 到最外面的那个时，我想改变它的颜色，没问题。但是，当我将鼠标悬停 到内部时，我只想更改它的颜色。这可能吗？换句话说，当 将鼠标悬停到内部 div 上
我需要展示这样的东西 有人可以帮忙吗？我可以实现以下输出 我正在使用以下代码:: GridView.builder( scrollDirection: Axis.vertical,
当 Bottom Sheet 像 Android 键盘一样打开时，是否有任何方法可以手动上推布局( ScrollView 或回收器 View 或整个 Activity )？或者你可以说我想以 Bott
我有以下代码，用于使用纯 HTML 和 CSS 显示翻转。当您将鼠标悬停在文本上时，它会更改左右图像。 在我测试的所有浏览器中都运行良好，Safari 4 除外。据我收集的信息，Safari 4 支持
我构建了某种 CMS，但在使用 TinyMCE 和 Bootstrap 时遇到了一些问题。 我有一个页面，其中概述了一个 div，如果用户单击该 div，他们可以从模态中选择图像。该图像被插入到一个
出于某种原因，当我设置一个过渡时，当我的鼠标悬停在一个元素上时，背景会改变颜色，它只适用于一个元素，但它们都共享同一个类？任何帮助我的 CSS .outer_ad { position:rel
好吧，这真的很愚蠢。我不知道 Android Studio 中的调试监视框架发生了什么。我有 1.5.1 的工作室。 是否有一些来自 intellij 的 secret 知识来展示它。 最佳答案 与以
我有这个标记: some code > 我正在尝试获取此布局: 注意:上一个和下一个按钮靠近#player 我正在尝试这样: .nextBtn{
网站:http://avuedesigns.com/index 首页有 6 个菜单项。我希望每件元素在您经过时都有自己的颜色。 这是当您将鼠标悬停在 div 上时将所有内容更改为白色的行 li#hom
我需要在 index.php 文件中显示它，但没有任何效果。我所有的文章都没有正确定位。我将其用作代码: 最佳答案 您可以首先检查您
我是一名优秀的程序员,十分优秀！