标签: css-tables

为表格中的交替行设置样式的最佳方法是什么？

显然,奇数/偶数行的实际样式将通过CSS类完成,但将类"附加"到行的最佳方法是什么？将它放在标记中是更好的,还是通过客户端javascript更好？哪个更好？为什么？

为简单起见,我们假设这是一个大表,100行,并且颜色方案是交替的奇数/偶数行.另外,在页面的其他地方需要某种可以轻松完成此操作的javascript库,因此该包的开销不是一个因素.

这个问题的真正目标是确定所涉及的权衡取舍以及如何处理这些权衡,例如如果页面在负载下遇到服务器的性能命中(假设是动态表),带宽命中对于具有较低连接速度的用户,通过向HTML添加额外的布局代码来实现语义命中(这里的想法是HTML用于内容,CSS用于布局,javascript用于内容的行为以及控制/扩充布局)

html css css-tables

cde*_*zaq

2016 09-16

2
推荐指数

2
解决办法

3474
查看次数

边境从桌子走了？

出于某种原因,每当我用一些CSS更改默认高度时,其中一个内部边框就会消失在我的桌面上.

HTML:

<table class="event">
  <tr>
    <td>Start Date</td>
    <td>2009-6-2</td>
  </tr>
  <tr>
    <td>End Date</td>
    <td>2009-6-8</td>
  </tr>
  <tr>
    <td>Location</td>
    <td>Vail</td>
  </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

CSS:

table.event
{
  border-collapse: collapse;
  border: 1px solid #000;
  width: 33%;
  height: 300px;
}

table.event td
{
  border: 1px solid #000;
  padding: 2px;
}

Run Code Online (Sandbox Code Playgroud)

这是它目前的样子

http://img410.imageshack.us/img410/394/whatv.png http://img410.imageshack.us/img410/394/whatv.png

有人对我如何解决这个问题有任何想法吗？

html css stylesheet css-tables

Jas*_*onV

2016 09-26

2
推荐指数

1
解决办法

398
查看次数

使用CSS,如何设置单个单元格或单个列的格式？

html css css-tables

leo*_*ora

2017 01-01

2
推荐指数

1
解决办法

1万
查看次数

设置要显示的表:块

我喜欢让我的表行为像块元素.我无法将其设置为宽度:100%,因为它确实有一些填充,这将导致100%+填充PX.

退房:http://jsfiddle.net/LScqQ

最后桌子做了我想要的,你能看到盒子阴影吗？但桌子上的孩子不喜欢那样^^

我猜THEAD里面的TH是问题所在.它们没有达到66%至33%的预期比率.

把招工广告...

css width css-tables

red*_*dia

2017 01-19

2
推荐指数

2
解决办法

3万
查看次数

分页符后重复表标题

打印HTML表格时，可以使用CSS强制在分页符之后再次显示表格的标题行。这种风格：

@media print {
   thead { display: table-header-group; }
}

Run Code Online (Sandbox Code Playgroud)

结果是：

字幕
-------------
Col1 | Col2
-------------
数据1 | 数据2
数据3 | 数据4

- 分页符 - 

Col1 | Col2
-------------
数据5 | 数据6

有没有一种方法可以在分页符之后重复表标题？我认为您可以做类似的事情caption { display: table-caption-group; }，但这并不存在。该解决方案需要在IE9中工作。

html css printing caption css-tables

Bri*_*ser

2017 07-29

2
推荐指数

1
解决办法

2576
查看次数

溢出不适用于td内的div

所以我试图让溢出属性为td中的div工作.但是,我以百分比的形式设置td的宽度.因此,我不能用固定的像素数设置div的宽度(在td内),因为我不会事先知道它.

<table id="table">
<thead>
    <tr> 
        <th>column 1</th>
        <th>column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><div class="cell">Aaaaaaaaaaaaaabbbbbbbbba</div></td>
        <td><div class="cell">bbbbbbbbbbbbbaaaaaaaaaaabb</div></td>
    </tr>
 </tbody>
</table>?


#table {
     width:100px !important;
}

th {
   width:16% !important;
   border: 1px solid black;
}

.cell{
    width:100%;
     overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap;
   }

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/2Sync/

有任何想法吗？!

非常感谢!

javascript css jquery css3 css-tables

abi*_*son

lucky-day

2
推荐指数

1
解决办法

4132
查看次数

垂直对齐绝对定位

在下面的代码中,我试图使绿色div.middle元素中的元素垂直对齐到中间.

我尝试了表格单元格方法,但无法使其正常工作.我听说这是由于绝对定位并尝试了这个解决方案没有运气: CSS - 垂直对齐表格单元格无法使用绝对位置

这似乎是由于.table-cell没有高度 - 我希望它的高度等于其父容器,其高度不同.

的jsfiddle:

http://jsfiddle.net/q5jKM/1/

有没有人知道让绿色div.middle元素垂直对齐到中间的方法？任何方法都可以.它只需要能够处理其可变高度.只用css是否可能？或者我是否必须加入一些jQuery？

编辑:

box-align也不是一个可行的解决方案,因为浏览器支持并被新标准取代.

CSS

     html,body{height:100%;margin:0}
#sidebar {
    width: 22em;
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index:2;
    color: #ffffff;
    background-color: #333333;  
    overflow:auto;
    height: 100%;
}

#sidebar .nav {
    width: 3em;
    float: right;
    background-color: #2e2e2e;
    border-left: 2px groove #454545;
    height: 100%;
    position:relative;
    min-height:34em;    
}

#sidebar .content {
    height: 100%; 
    width: 16.875em; /*    17-(2/16)   - 20em - .nav - nav border*/
    float:left; 
    position:relative;
    min-height:34em;
}

#sidebar .top {
    position:absolute;
    top:0;
}
#sidebar …

Run Code Online (Sandbox Code Playgroud)

css vertical-alignment css-tables

Rya*_*ing

2017 07-07

2
推荐指数

1
解决办法

2万
查看次数

我<table>在iOS上的Safari中遇到元素问题。我想将表格更改为，display:block;但似乎无法将其更改为display: table;。我可以调试它在MacBook Pro上我已经和检查元素和奇怪的是，在不同的网站上我的我有一个<table>是display: block;，我不能改变它，但我有不同的<table>（一个我会喜欢更改），就是display: table;我无法使用覆盖样式display: block;。我已经尝试了重写诸如此类的css的常规方法，!important并且似乎应该捕获它，但是在Safari的计算选项卡中，它仍然只会显示display: table;。我知道将更<table>改为display:block;可以解决我的问题，因为我的其他表可以正常工作。

是否有人对Safari覆盖样式有任何经验，是什么使我无法更改表的显示属性？

不幸的是，由于该问题仅发生在iOS Safari（而不是Chrome仿真）中，因此我很难在此处链接到示例。

safari html-table mobile-safari css-tables ios

blu*_*rbo

lucky-day

2
推荐指数

1
解决办法

1391
查看次数

文本以最小高度为中心并调整容器的高度

我正在尝试使用水平容器,填充可变大小的文本.如果文本很短,则容器应具有最小高度并垂直居中.如果文本较长,容器应增加其高度,保持垂直和底部边距.

我准备了一个jsfiddle 这个小提琴受到了这个答案的启发,也尝试display: table了这个答案和这一个

html css css3 css-tables flexbox

NoI*_*his

2017 06-12

2
推荐指数

1
解决办法

146
查看次数

表格行前的分页符

我有一个表，我想在打印时在某些TR之前强制分页，因此我四处搜索，发现将“ page-break-before”应用于表行（tr）似乎很简单：将display设置为，block并page-break-before照常使用。但是，它似乎不起作用（至少在Chrome 59，Windows中不起作用）。例如：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  tr.break-here {
    display: block;
    page-break-before: always;
  }
</style>
</head>
<body>
<table>
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
</table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

打印时，所有这三个部分都在同一页上，但是应该是三个单独的页面。

有人建议使用伪元素，但我没有用。还有建议确保TR的TD包含块级元素，因此在该示例中，我尝试将空div放入相关单元格中，并且也保持不变。

还有如何应用CSS分页符来打印具有很多行的表？，我尝试过的地方：