我已被置于需要使用display:table-cell命令的div元素的位置.
但是我发现只有将百分比添加到宽度时,"单元格"才能正常工作.
在这个小提琴http://jsfiddle.net/NvTdw/当我删除百分比宽度时,单元格没有相等的宽度,但是当一个百分比值被添加到宽度时一切都很好,但只有当该百分比等于div的最大数量的比例,因此四列25%,五个20%,在这种情况下五个在16.666%.
我想可能会增加一个百分比 - 比如1%将是一个很好的修复所有,但细胞再次脱离线.
为什么是这样？
.table {
display: table;
height: 200px;
width: 100%;
}
.cell {
display: table-cell;
height: 100%;
padding: 10px;
width: 16.666%;
}
.grey {
background-color: #666;
height: 100%;
text-align: center;
font-size: 48px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}<div class="table">
<div class="cell">
<div class="grey">Block one</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block</div>
</div>
<div class="cell"> …我正在尝试创建一个表格,其中每个单元格都有背景颜色,它们之间有空白区域.但我似乎很难做到这一点.
我尝试设置td边距但似乎没有效果.
table.myclass td {
background-color: lime;
margin: 12px 12px 12px 12px;
}?
如果我用填充做同样的事情,它可以工作,但是我没有单元格之间的间距.
有人可以帮我吗？
jsFiddle:http://jsfiddle.net/BfBSM/
有没有一种简单的方法可以将第二列中所有单元格的文本对齐方式设置为right？
或者唯一的方法是为列中的每个单元格设置对齐方式？
(不幸的是,Firefox不支持align该col标记的属性.)
我正在尝试设计一个有一些表格的页面.似乎样式表比应该是更痛苦.
问题如下.桌子应该有一个固定的高度,并且当底部太少时,显示底部的空白区域 - 或者当内容太少时显示空白 - 或者显示垂直滚动条.除此之外,表格有一个不应滚动的标题.
据我所知,thead不滚动是表的默认行为.拉伸tfoot可以很好地填充白色空间.可悲的是,似乎我可以放在桌子高度上的每一个约束都被高兴地忽略了.我试过了
table {
height: 600px;
overflow: scroll;
}
我试过了max-height.我试图绝对定位表并给出顶部和底部坐标.我试图在Firebug中手动编辑高度,看看它是否与CSS特异性有关.我也尝试过设置高度tbody.事实上,无论我的努力如何,表格的内容始终保持高水平.
当然我可以伪造一个带有div结构的表,但它实际上是一个表,我担心使用div我可能遇到一些问题,其中一些列可能没有正确对齐.
我怎么能给桌子一个高度？
见http://jsfiddle.net/mpx7os95/14/
行为是所需的行为,它允许3列布局中的中心列占用所有可用空间,并且当收缩到足够远时仍然允许其内部的文本溢出为省略号.这似乎是有效的max-width: 0,但为什么会产生这种效果呢？
max-width: 0在这种情况下有什么特别之处？
.row {
width: 100%;
display: table;
}
.col {
position: relative;
min-height: 1px;
border: 1px #000 solid;
display: table-cell;
}
.x {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width:100%;
max-width: 0;
}<div class="row">
<div class="col">abc</div>
<div class="col x">test blah blah blah blah blah zzzzz.</div>
<div class="col">def</div>
</div>所以我喜欢它,当我的应用程序在Firefox中运行良好,但随后我在IE中打开它... ...不,请再试一次.
我遇到的问题是我将CSS显示属性设置为JavaScript none或table-cell使用JavaScript.
我最初使用的是display: block,但是如果没有table-cell属性,Firefox就会让它变得怪异.
如果不在JavaScript中添加黑客来测试IE,我很乐意这样做.有什么建议？
谢谢.
当您激活"冻结窗格"时,如何创建一个锁定第一行和第一列的表(如在Excel中)？我需要表格水平和垂直滚动(存在很多解决方案,但只允许垂直滚动).
因此,当您向下滚动表格时,第一行将保持不变,因为它将具有列标题.thead无论是什么使得解决方案变得更容易,这可能最终都会出现,或者可能不会出现.
向右滚动时,第一列保持不变,因为它保存行的标签.
我很确定单独使用CSS是不可能的,但有人能指出我的JavaScript解决方案吗？它需要在所有主流浏览器中工作.
我最近注意到,可以display: table-cell;在元素上使用而不使用元素包围它display: table-row;
示例(在IE,Chrome,FF,Safari,Opera中工作):
<div style="display: table;">
<div style="display: table-cell;">
Text
</div>
</div>
这被认为是不好的风格？表格单元是否应该由表格行包围,还是没有必要？
我有一个HTML文档,我有两个不同的表.一个是Alpha类,一个是Beta类.我想将此css仅分配给类Beta ...
td
{
border-style:solid;
border-top:thick double #ff0000;
}
我无法弄清楚如何仅将此分配给Beta.有谁知道怎么样？
我对此做了一些研究,但我只是想问那些比我更了解的人.
将高度设置为表格单元格仅作为最小高度是真的吗？我知道在Firefox中这是真的,但是其他浏览器会发生什么呢？