标签: css-tables

如果我有一个像这样非常非常简单的例子的表：

table {
    table-layout:fixed;
    width:300px;
}

.td1 {
    width:100px;
}
.td2 {
    width:200px;
}

我的其中一张.td2包含一张图像，可以说，300px在width。我想显示滚动条以允许用户滚动以查看全部内容。但我认为这是不可能的，是吗？

所以我的问题是：

1. hidden除了处理表中的溢出之外还有其他选择吗？

2. 是否可以仅当内容超出设定宽度时才显示滚动条？（我发誓我在一些论坛软件中见过它，但我不记得是哪一个了）

我的网站允许用户使用PHP生成表.行和单元格的数量是可变的,但列数始终是固定的.该表通常生成两位数字.当表生成三位数字时,整个表格会扩展以适应这种情况,并且表格的大小会增加,从而破坏我的布局.有没有办法使用CSS并设置此表的tds样式,以便在生成3位数字时表不会更改大小.(3位数字最长).我尝试在表中添加填充,但它不起作用.

另外,我应该在表格或类中使用id吗？

我有以下代码来执行替代行颜色，效果很好：

$("table.altRow tr:odd").css("background-color", "#DEDFDE");
$("table.altRow tr:even").css("background-color", "#EEECEE");

但我在某些情况下隐藏了某些行，所以我想看看是否有任何方法可以做其他行颜色，但只适用于可见行？

我创建了一个js小提琴来说明问题:

http://jsfiddle.net/pLn7qgp7/

实际上这在Internet Explorer中不起作用- 我将宽度设置为500px但浏览器忽略了这一点.

我知道我可以简单地为图像添加宽度,但我搜索另一种解决方案,以便图像编号可以变化.

我正在尝试制作一个布局非常简单的页面:一个停留在一个地方的标题,以及在其下滚动的内容.标题div将是一个未知高度,显示其所有内容.我希望内容div占用页眉底部和页面底部之间的所有空间,以便能够滚动.

我对此有几个限制:

• 我不想使用固定或绝对定位来保持标头到位,而是使用完美高度的div显示内容,并且只有该div可滚动
• 我不想设置max-height,或任何其他需要知道标题div的高度的属性

我为实现这个目的而探索的两种方法是使用表格布局和使用弹性框.我还没有设法使用这两种方法中的任何一种进行滚动.以下是两次尝试的代码.我正在使用React.任何指针都将非常感激.谢谢!!

编辑:我没有成功做到这一点使用内联样式和测量头的高度,它产生之后.这适用于桌面,机器人Chrome和Android浏览器上的chrome,但它在ios safari中打破了.我不知道它为什么破了,我正在进行调试,但我更喜欢一个不需要内联样式的更干净的解决方案.谢谢!

反应元素:

var SimpleScrolly = React.createClass({
    render: function(){
        var lorem = "Lorem ipsum dolor sit amet... ";
        var sampleText = lorem + lorem + lorem + lorem;
        var sampleHeader = "this is a header!"

        return(
            <div className={"simple_scrolly"}>
                <div className={"header"}>
                    {sampleHeader}
                </div>
                <div className={"content"}>
                    {sampleText}
                </div>
            </div>
            );
    }
});

表格布局样式:

.simple_scrolly{

  display: table;
  height: 100%;

  .header{
    display: table-row;
  }

  .content{
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: table-row;
  } …

我有一张细长但很长的桌子，一个月中的每一天都有一排。时间太长了，人们不得不在大多数屏幕分辨率上滚动才能看到底部。由于表格右侧有足够的空间，我想将表格自动拆分为多列；每列只取一些表格行。

CSS 多列似乎是此任务的理想解决方案，但column-width不适用于表格：

适用于：不可替换的块级元素（表格元素除外）、表格单元格和行内块元素

我可以用什么代替？（我不在乎 IE）

TL:DR; at bottom.

I have been looking for an answer to this for about 6 hours, trying different solutions, making nested elements deeper than should ever be made just trying to figure this one out.

I have a div that is responsive, changes width and height respectively. In it, I have 4 divs that I want to display evenly. In doing that I made each one height:25%; display:table;, and inside it a <p> element with display:table-cell; vertical-align:middle;. It …

我有一个非常基本的CSS问题.我有一个固定高度的div,我在div里面有一张桌子.

除非div获得滚动条,否则表的内容将不适合div.问题是现在,表格的内容溢出了div,因为它的高度超过了我在div上设置的高度.

这就是我对Div的看法

 display: inline-block;
    float: left;
    max-height: 200px;

这是一个例子.

的jsfiddle

如何让表格适合div并有一个滚动条？这不是特定于任何浏览器.我自己在Chrome和IE中都试过了.

我创建了一个带有表格的示例页面.如果页面将来被删除,这里是 Pastebin 上的代码.

我想在悬停时突出显示表格行.它适用于普通tr,但它不适用于tr.alt(奇数行).

突出显示代码:

tr:hover,tr.alt:hover
{
background: #f7dcdf;
}

使奇数行不同颜色的代码:

tr.alt td
{
background: #daecf5;
}

任何想法如何解决这个问题？

我想要一个固定头的桌子,以便身体的其余部分可滚动.问题是我需要用materializeCss表来完成它.

我可以实现这一点,并且我已经这样做了,但是每个解决方案都会使具有不同字符的表列不对齐,请检查此图像:

这个有边框,所以你可以看到问题:

这是我正在使用的CSS并产生所述结果(scroll该类在表中):

.scroll {
  border: 0;
  border-collapse: collapse;
}    
.scroll tr {
  display: flex;
}    
.scroll td {
  flex: 1 auto;
}    
.scroll thead tr:after {
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
}    
.scroll thead th {
  flex: 1 auto;
  display: block;
}    
.scroll tbody {
  display: block;
  overflow-y: auto;
  height: calc(80vh - 100px);
}

我的问题:如何按列固定头部并实现内容对齐？