一点点背景,我试图实现这个最小的部分来获得这个演示的固定报告标题:http: //www.imaputz.com/cssStuff/bigFourVersion.html
我有它工作,除了我的标题行(我有多个标题行)没有垂直排列与下面的单元格.我用这个css将所有单元格的宽度设置为相同:
td {
width: 100px;
}
th {
width: 100px;
}
并且改变宽度确实会产生影响,但由于某种原因,它们的宽度不会达到100像素.从标题行到标题行,由于某种原因宽度不同. 如何强制所有细胞达到相同的宽度？
下面是CSS的其余部分.我正在使用firefox进行测试,并尝试将冻结的标头与CSS一起使用.链接示例中的一些CSS非常特定于该布局,我正在尝试使用可以处理不同数量的列/行的任何编辑.目前它的工作原理是细胞并非全部对齐.
#reportPlace table thead tr {
display: block;
}
#reportPlace table tbody {
display: block;
height: 262px;
overflow: auto;
}
注意:如果我删除这两种display: block样式,它修复了列宽的问题,但随后不再冻结标题行.
部分解雇了它.我在整个表格上设置了块显示,而不是在每个元素和主体上设置块显示,现在所有列都排成一行.因为多行标题中的每一行都单独设置了块,所以它们独立地自动调整宽度.但是,宽度设置仍然被忽略,我将需要它来格式化报告.
#reportPlace table /*thead tr*/ {
display: block;
}
#reportPlace table tbody {
/* display: block;*/
height: 262px;
overflow: auto;
}
示例HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="reportPlace">
<table border="0">
<thead>
<tr class="fixedHeader">
<th class="titleAllLockedCell">
<span> </span>
</th>
<th class="titleTopLockedCell">
<span>Fruits</span>
</th>
<th class="titleTopLockedCell">
<span>Vegitables</span>
</th>
</tr>
<tr class="fixedHeader">
<th class="titleAllLockedCell">
<span> </span>
</th>
<th class="titleTopLockedCell">
<span>Original</span>
</th>
<th class="titleTopLockedCell">
<span>Original</span>
</th>
</tr>
<tr class="fixedHeader">
<th class="titleAllLockedCell">
<span> </span>
</th>
<th class="titleTopLockedCell">
<span>2009</span>
</th>
<th class="titleTopLockedCell">
<span>2009</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="titleLeftLockedCell">
<span>1-02</span>
</td>
<td class="valueCell">
<span>65412 </span>
</td>
<td class="valueCell">
<span>16542 </span>
</td>
</tr>
<tr>
<td class="titleLeftLockedCell">
<span>1-03</span>
</td>
<td class="valueCell">
<span>456052 </span>
</td>
<td class="valueCell">
<span>1654652 </span>
</td>
</tr>
<tr>
<td class="titleLeftLockedCell">
<span>1-04</span>
</td>
<td class="valueCell">
<span>564654 </span>
</td>
<td class="valueCell">
<span>654654 </span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Aar*_*nLS 61
我需要使用min-width:100px样式而不是width样式.
我发现的其他问题包括要求CSS table { table-layout: fixed; width:100%; }作为表格需要为列设置宽度以尊重宽度.
有第一行包含任何colspan一个也可能是一个问题,所以我包括一个额外的行作为没有边框和0高度(基本上不可见)的第一行,并具有单个单元格(没有colspans),以便可以通过该行建立宽度第一个"假"行,然后第二行与colspan不会导致问题.请注意,您不应该填充填充/边距,因为您希望第一行与其他行具有相同的宽度,以便正确建立宽度:
<tr class='scaffolding'>...</tr>
tr.scaffolding, .scaffolding td {
border:none;
padding-top:0;
padding-bottom:0;
height:0;
margin-top:0;
margin-bottom:0;
visibility:hidden;
}
| 归档时间： |
|
| 查看次数： |
52496 次 |
| 最近记录： |