标签: css-tables

我正在使用通用规则TH标记,Table但它扰乱了所有事情.我使用的规则如下:

th
{
    color: #fff;
    background: #7d7e7d;
}

但现在我想为几个表指定ID,以便它根本不影响其他表.我做的是:

#id1,#id2  th
{
    color: #fff;
    background: #7d7e7d;
}

这种颜色的传播方式也是如此.我如何完成任务？

我需要在表格中添加以下功能:

当用户单击某一行(选择它)时,该行将用颜色标记#FFCF8B(相同hover).我试过#newspaper-b tbody tr.selected td,但它不起作用.

   #newspaper-b {
        border-collapse: collapse;
        border-color: #B7DDF2;
        border-style: solid;
        border-width: 1px;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 11px;
        margin: 0;
        text-align: left;
        width: 480px;
    }
    #newspaper-b th {
        background: none repeat scroll 0 0 #EBF4FB;
        border-color: lightgray;
        font-size: 11px;
        font-weight: bold;
        padding: 15px 10px 10px;
    }
    #newspaper-b tbody tr td {
        background: none repeat scroll 0 0 #FFFFFF;
    }
    #newspaper-b td {
        border-top: 1px dashed #FFFFFF;
        color: #000000;
        padding: 10px;
    }
    #newspaper-b tbody …

我有一个带有复选框的表格,每个复选框行中的单元格包含有关该复选框的信息.所以我想为行使用label,但据我所知,你不能在table和td 标签之间使用label.

然后我制作了同样的CSS-table版本,它运行正常.我将标签设置为表格行,单元格正确对齐,单击它们将选中/取消选中复选框.

现在问题是:我希望复选框跨越多行.

http://jsfiddle.net/odraencoded/YaS5v/ - HTML表格版本具有rowspan属性,但我不能在单行中使用标签,更不用说多行了.

<table>
  <tr>
    <td rowspan=2><input type=checkbox /></td>
    <td>...</td>
  </tr>
  <tr><td>...</td></tr>
</table>

http://jsfiddle.net/odraencoded/EKzXv/ - CSS表版本让我使用标签,但我找不到设置rowspan的方法.

<div style="display: table;">
  <label style="display: table-row-group;">
    <span style="display: table-row;">
      <span style="display: table-cell;">
        <input type="checkbox" />
      </span>
      <span...>...</span>
    </span>
    <span...><span...>...</span></span>
  </label>
</div>

有没有办法让标签标签包含多行？它包含的一个单元格是标签所用的输入复选框？那个输入复选框单元格应该跨越标签包含的所有行？无论如何呢？

这是问题所在.我有我的代码,所以我应该在每个<tr>项目的顶部和底部看到边框.但是,除了top元素之外,我只看到底部的内容.

.tstyle1 {
    margin: 10px 0 0 30px;
    width: 950px;
}

.tstyle1 tr {
    height: 120px;
    border-bottom: 1px solid black;
    border-collapse: separate;
    border-top: 1px solid black;
    border-bottom: 1px solid orange;
}

.tstyle1 td {
    border: none;
}

这是重新创建的问题. http://jsfiddle.net/fL3rx/

我正在尝试创建一个具有rowspan,斑马效果的表,并在悬停时突出显示该行.我有点工作,但并不完全.

它应该是这样的:http://codepen.io/chriscoyier/pen/wLGDz加上对行的斑马效应.不幸的是,使用jQuery或CSS的斑马效果对我来说不起作用,因为如果我这样做,线条不会在悬停时改变.

有什么建议？

作为一个例子,采取以下无序列表和它的容器:

<div class="table-like">
    <ul>
        <li><span>Table-cells</span></li>
        <li><span>play nice</span></li>
        <li><span>automatically</span></li>
        <li><span>with auto-height/width/stretching and of course, vertical alignment..</span></li>
    </ul>
    <ul class="row2">
        <li><span>but</span></li>
        <li><span>do</span></li>
        <li><span>they</span></li>
        <li><span>stack up (vertically)?</span></li>
    </ul>
</div>

使用以下CSS:

.table-like {
    display: table;
    font-variant: small-caps;
    width: 100%;
}
.table-like ul { 
    display: table-row;
}
.table-like ul li {
    background-color: #DDD;
    border: 1px solid #FFF;
    display: table-cell;
    overflow: hidden;
    padding: .5em 1em;
    vertical-align: middle;
    width: 25%;
}
.table-like ul li span {
    display: block;
    max-height: 2.1em;
}

是否有办法强制行垂直堆叠,同时保留display:table-cell属性的好处(自动高度,垂直对齐等)？

我应该使用div构建它,但我必须使用table作为我的客户端(虚拟用户).因此,我使用CSS构建这个html表,这在Chrome中非常完美.

我已经阅读了一些相关的主题,但只是没有得到关键技巧!希望有人告诉我错误.

这里是我的CSS和我在这里的jsfiddle演示(仅适用于Chrome浏览器),请首先检查在Chrome中的jsfiddle演示,然后尝试使用Firefox,你明白我的意思.

#content_container {
    width:960px;
}
#content_container .fullcontainer > table {
    border-bottom: 4px solid #222;
}
#content_container .fullcontainer {
width:inherit !important;
margin: 0 auto !important;
padding: inherit !important;
}
#content_container table.eurostyle {
    margin: 25px auto !important;
    border-collapse: collapse !important;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    text-shadow: 1px 1px 1px #eee;
}
table td img.alignleft {
margin: 0;
}
body h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold;
}
.eachtop {
    border-top: …

关于text-overflow: ellipsis在表格单元内进行工作,有几个SO问题.解决方案主要是设置table-layout: fixed.

为什么我不能这样做？好吧,因为我有动态单元格宽度.

http://jsfiddle.net/d7h437he/2/

按钮单元应该"适合内容",复制单元应该采取其余的.这种布局是不可能的,table-layout: fixed因为按钮单元需要指定宽度,我不能,因为它是动态的.

如何截断复制单元格？

注意:"不可能"是一个有效的答案,将被接受.:)

这是我的HTML代码:

<ul>
  <li>
    <div class="imgBox"><img 1></div>
    <div class="txtBox">text 1</div>
  </li>
  <li>
    <div class="imgBox"><img 2></div>
    <div class="txtBox">text 2</div>
  </li>
  <li>
    <div class="imgBox"><img 3></div>
    <div class="txtBox">text 3</div>
  </li>
  <li>
    <div class="imgBox"><img 4></div>
    <div class="txtBox">text 4</div>
  </li>
<ul>

桌面的预期结果是:

_____________________
|  img 1  |  txt 1  |
_____________________
|  txt 2 |   img2   |
_____________________
|  img 3  |  txt 3  |
_____________________
|  txt 4  |  img 4  |
_____________________

每个块宽:50%,图像宽度:100%到盒子,自动高度; 文本在框的中间,如display:table-cell; 文本对齐:中心; 垂直对齐:中部;

移动设备的预期结果是:

___________
|  img 1  |
___________
| …

我试图将文本放在右侧并垂直居中与图像对齐.我怎样才能做到这一点？

我目前的代码:

<div style="display: table;">
  <div style="display: table-cell;"><img src="//dummyimage.com/100"></div>
  <div style="display: table-cell;">text</div>
</div>