标签: css-tables

表格(火炬突出显示悬停在td):

例如http://img52.imageshack.us/img52/4377/testeyy.png

标签栏CSS:

width: auto;
padding: 0;
margin: 0;

问题:

为什么我的左栏有那个看不见的"填充权"？缩小列以适应其内容是不可能的？

- 编辑 -

问题在于表格本身.我用"width:100%"定义了表格.删除了,问题就消失了.

为什么CSS属性overflow:scroll;不起作用<td>,虽然overflow:hidden;效果很好？

<table border="1" style="table-layout:fixed; width:100px">
  <tr>
    <td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

从CSS规范^1,2,我不明白为什么.

鉴于这样的标记:

<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>

是否可以将此文档设置为如下样式:

|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|

(如果A或B中的内容较长,其邻居将增长以匹配其高度)...

没有任何额外的标记？

我明白给予.a和.b一个display价值table-cell只会使这一大排.

解决方案是什么？

如何在鼠标悬停时更改html表列的背景列？

最好只用css.

我正在尝试设置一个表格,以便每一行都是不同的颜色(奇数/偶数).我有以下CSS:

#woo tr:nth-child(even) td {
    background-color: #f0f9ff;
}

#woo tr:nth-child(odd) td {
    background-color: white;
}

但是,我的一些行可以隐藏,我仍然希望行交替.如何调整上面所以它给出了备用行的外观,即使彼此相邻的行不一定是奇数和偶数？

如何设置"内边框" - 不同单元格之间的边界.

通过设置样式属性,我设法控制外边框,但内边框保持相同的灰色和相同的宽度.我应该调整哪些属性来控制内边框？

我有以下内容:

CSS:

.photo {
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100px;
  height: 100px;
}

HAML

.photo
  %img{:src => my_url}

在这里查看jsFiddle .我用来演示的图像是150px×80px.

我需要在.photodiv中显示图像并裁掉任何多余的图像.图像需要垂直和水平居中.但是,display:table-cell导致.photodiv忽略我的宽度和高度设置.我怎么能绕过这个？

我需要动态构建一个表来保存一些数据.
我遵循了使用div的常用方法display: table,display: table-row并且display: table-cell:

.tab {
    display: table;
    height:100%;
    width: 200px;
}

.row {
    height: 100%;
    display: table-row;
}

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}

<div class="tab">
    <div class="row">
        <div class="elem">
            <div class="content">
                Content
            </div>
        </div>
        <div class="elem">
            <div class="content">
                Longer content that will need to wrap around eventually you know and don't you hate it when things …

我有包含多个其他表的html表.我的问题是内部表继承了与外部表相同的规则.

有没有办法超越外围桌子的规则？我基本上想告诉内表:

嘿内表你的名字是"X".我希望你忘记你的外表及其规则.我希望你遵循这些其他具体规则.

有没有办法在HTML/CSS中实现这一点？例子？

我一直试图从CSS 2.2规范中理解这段摘录一段时间没有成功(大胆的选择是我的):

UA必须通过检查表格第一行中的第一个和最后一个单元格来计算表格的初始左右边框宽度.表格的左边框宽度是第一个单元格折叠左边框的一半,表格的右边框宽度是最后一个单元格折叠右边框的一半.如果后续行具有较大的折叠左右边框,则任何多余的溢出都会溢出到表格的边缘区域.

通过检查使用表的顶部边框折叠其顶部边框的所有单元格来计算表格的顶部边框宽度.表格的顶部边框宽度等于最大折叠顶部边框的一半.

这就是Chrome中实现边框,折叠等的方式(FF和IE> 7是相同的):

table {
  border: 6px solid green;
  border-spacing: 0;
  border-collapse: collapse;
}
#cell_1_1 {
  border: 28px solid red;
}
#cell_2_1 {
  border: 12px solid chartreuse;
}
#cell_2_2 {
  border: 2px solid cyan;
}

虽然我期待这样的事情:

我期待桌子的左边缘厚14 px.因为第一个单元格的折叠左边框宽度#cell_1_1为28px(表格的左边框宽度是第一个单元格折叠左边框的一半),而左侧边框在单元格和表格之间分开.因此,在视觉上,该表在第一个单元附近具有28px边界,但是14px属于第一个单元的边界.然后表格的左侧边框保持不变.如果某个单元格的边界较宽,则它们向左突出,而不会影响表格的左边界.

顶部边框也是如此.

此外,我认为问题可能与摘录中的初始单词有关,即这些规则仅适用于表没有指定边框,但结果是不相关的(删除表的边框样式规则)根本就删除了绿色边框).

所以任何人都可以回答下一个问题:

• 在Chrome,FF,IE中这种折叠边框模型的实现是否正确？

• 如果它们是正确的,我对规范的理解有什么问题？

现在,如果我们反之亦然并假设Chrome中的实现作为推导规范的起点,那么这部分应该是下一个(我只保留了与左边界相关的部分以简洁):

UA必须计算表格的初始左右边界宽度,然后通过检查表格第一行中的第一个和最后一个单元格,将其用于相对于其包含块定位表格.在所有边界冲突(如果已解决)之后,表格的左边框宽度是第一个单元格折叠左边框的一半

...

如果后续行具有较大的折叠左右边框,则任何多余的溢出都会溢出到表格的边缘区域.

...

在确定表是否溢出某个祖先时(参见"溢出"),会考虑溢出到边距中的任何边界,但不会影响表相对于其包含块的位置

然后摘录会有意义.

这里有一个表格,边框宽于第一个单元格的内部,在一个包含块的粉红色背景中(我们可以看到,表格的边框是在第一个单元格的边框上选择的,因为它更宽,然后是这个边框用于将表放置在容器内.后续单元格的较宽边框突出于表的边界之外):

这里有一个相同的表,第一个单元格的边界比表格的边框宽,在边界冲突解决期间选择它.此处此边框用于相对于容器定位表: