标签: css-tables
如何应用CSS分页符来打印包含大量行的表？
我的网页中有一个动态表,有时包含很多行.我知道有page-break-before和page-break-afterCSS属性.如果需要,我在哪里将它们放入我的代码中以强制分页？
推荐指数
解决办法
查看次数
css display:表格不显示边框
<html>
<style type="text/css">
.table { display: table;}
.tablerow { display: table-row; border:1px solid black;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>
根据我的理解,应该在我通过tablerow类指定的每一行上画一个黑色边框.但边框不会出现.
我想改变一行的高度.如果我用'px'指定它 - 它工作.但是,如果我给它一个% - 不会工作.我试过以下
.tablerow {
display: table-row;
border:1px solid black;
position: relative; //not affecting anything and the border disappears!!
//position: absolute; // if this is set,the rows overlaps and the border works
height: 40%; // works only if specified …推荐指数
解决办法
查看次数
为什么Firefox和Opera忽略display:table-cell里面的max-width？
以下代码在Chrome或IE中正确显示(图像宽度为200px).在Firefox和Opera中,max-width样式完全被忽略.为什么会发生这种情况并且有好的解决方法？另外,哪种方式符合大多数标准？
注意
针对这种特殊情况的一种可能的解决方法是设置max-width为200px.然而,这是一个相当人为的例子.我正在寻找一个可变宽度容器的策略.
<!doctype html>
<html>
<head>
<style>
div { display: table-cell; padding: 15px; width: 200px; }
div img { max-width: 100%; }
</style>
</head>
<body>
<div>
<img src="http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue.
at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
leo metus, aliquam eget convallis eget, molestie at massa.
</p>
</div>
</body> …推荐指数
解决办法
查看次数
Bootstrap表溢出了长不间隔的文本
我正在使用Bootstrap,我有一个包含几列的表,其中最后一列有时会有一段没有空格的长文本.我注意到在某些屏幕尺寸下,表格将溢出其父div并与其兄弟表创建丑陋的重叠.
我玩弄它,我认为这个问题与文本没有空间有关.我创建了一个演示我的意思的jsfiddle.
正如您所看到的,最左上方的表格表现良好,只是垂直增长以容纳更多文本.但是,由于长文本没有空格,左下方的表格导致右侧溢出,左下方表格的右列在其兄弟的"下方"处蜿蜒.
有没有人有任何关于我如何解决这个问题的提示,以便将很长的文本剪切或部分拆分到新的一行？
推荐指数
解决办法
查看次数
在colgroup中使用text-align center
我在我的页面中有一个表,我使用colgroups以相同的方式格式化此列中的所有单元格,适用于背景颜色和所有.但似乎无法弄清楚为什么文本对齐中心不起作用.它没有将文本对齐居中.
例:
<table id="myTable" cellspacing="5">
<colgroup id="names"></colgroup>
<colgroup id="col20" class="datacol"></colgroup>
<colgroup id="col19" class="datacol"></colgroup>
<colgroup id="col18" class="datacol"></colgroup>
<thead>
<th> </th>
<th>20</th>
<th>19</th>
<th>18</th>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
#names {
width: 200px;
}
#myTable .datacol {
text-align: center;
background-color: red;
}
推荐指数
解决办法
查看次数
高度:<div>内的<div>为100%,显示:table-cell
这是使用display: table和display: table-cellCSS声明的2列标记:
.table {
display: table;
}
.cell {
border: 2px solid black;
vertical-align: top;
display: table-cell;
}
.container {
height: 100%;
border: 2px solid green;
}<div class="table">
<div class="cell">
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
</div>
<div class="cell">
<div class="container">Text</div>
</div>
</div>但是.container块不会垂直填充父单元格.以下是JsFiddle的一个例子:http://jsfiddle.net/MGRdP/2.
我有什么 | 我需要的
请不要提出JS解决方案.
推荐指数
解决办法
查看次数
为什么宽度:100%不在div {display:table-cell}上工作？
我试图垂直和水平地居中覆盖图像幻灯片(flexslider)的一些内容.有一些类似的问题,但我找不到一个直接适用于我的具体问题的令人满意的解决方案.由于FlexSlider的限制,我不能position: absolute;在我的实现中使用img标记.
我几乎有下面的工作方法.唯一的问题是我无法inner-wrapper使用display: table-cell属性获取宽度和高度声明来处理div .
这是标准行为,还是我错过了我的代码？如果这是标准行为,那么我的问题的最佳解决方案是什么？
HTML
<ul>
<li>
<img src="#">
<div class="outer-wrapper">
<div class="inner-wrapper">
<h1>My Title</h1>
<h5>Subtitle</h5>
</div>
</div>
</li>
</ul>
CSS
html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
}
ul {
background: #CCC;
height: 100%;
width: 100%;
list-style-position: outside;
margin: 0; padding: 0;
}
li {
width: 100%;
display: table;
}
img {
width: 100%;
height: 410px;
}
.outer-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0; …推荐指数
解决办法
查看次数
如何限制表格列宽？
我表中的一列可以包含没有空格的长文本.如何将宽度限制为150px？我不希望它总是150px(如果它是空的它应该是窄的),但是如果有一个长文本我希望它被限制为150px和要包装的文本.
这是一个测试示例:http://jsfiddle.net/Kh378/(让我们限制第3列).
先感谢您.
更新:
设置此样式:
word-wrap: break-word;
max-width: 150px;
在IE8中不起作用(在不同的计算机上测试),我想它在任何版本的IE中都不起作用.
推荐指数
解决办法
查看次数
Bootstrap表行悬停
如何Bootstrap 3在悬停时更改表格行的背景.我现在使用的表类是table table-striped.我试图<tr>在表格中的标签上添加一个额外的类,并使css像这样.table-row:hover{background:black;}.现在只有非条纹行正在工作.是不是在引导程序中有一个类可以让我轻松实现它？或者我应该用它JQuery来解决这个问题？我真的无法自己解决这个问题.
推荐指数
解决办法
查看次数
Mac/PC上的字体渲染/线高问题(元素外)
该设计
信息小部件内容应在中间垂直对齐,如下所示:
编码设计
Windows:Chrome 20/FF 14/IE 9
Mac(Lion/Mt. Lion):Chrome/FF
代码
HTML
<div class="info">
<div class="weather display clearfix">
<div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>
<div class="fl">
<p class="temperature">82° / 89°</p>
<p class="conditions">Thunderstorms</p>
</div>
</div>
<div class="time display">
<p>11:59 <span>AM</span></p>
</div>
<div class="date display clearfix">
<p class="number fl">23</p>
<p class="month-day fl">Jun <br />Sat</p>
</div>
</div><!-- //.info -->
CSS
.info {
display:table;
border-spacing:20px 0;
margin-right:-20px;
padding:6px 0 0;
}
.display {
background-color:rgba(255, 255, 255, .2);
border-radius:10px;
-ms-border-radius:10px;
color:#fff;
font-family:"Cutive", Arial, sans-serif;
display:table-cell;
height:70px;
vertical-align:middle; …推荐指数
解决办法
查看次数
标签 统计
css-tables ×10
css ×9
html ×7
flexslider ×1
fluid-layout ×1
hover ×1
html-table ×1
page-break ×1
printing ×1
row ×1