标签: css-tables
内联块和CSS文本包装
我想显示一个复选框,然后是一些包含在自身下方的文本.没有任何CSS的HTML如下所示:
<input type="checkbox" checked="checked" />
<div>Long text description here</div>
我希望它显示类似于:
X Long Text
Description
Here
它目前像这样包装
X Long Text
Description Here
这对表很容易,但出于其他原因我需要它在CSS中.我认为显示的组合:inline-block/float:right/clear/span而不是DIV会起作用,但到目前为止我没有运气.
推荐指数
解决办法
查看次数
table-layout:fixed忽略td的最小宽度
我有一个项目需要一个包含固定宽度和灵活宽度列的表.
无论浏览器的宽度如何,有些列的宽度始终必须为80px.
其余的列需要是一个灵活的宽度,但宽度相等,最小宽度为75px;
通过添加table-layout:fixed; 在表格中我可以得到灵活的宽度cols都具有相等的宽度,但是表格忽略了td的min-width属性.
如果我删除了table-layout:fixed,则min-width有效但灵活的宽度cols都有不同的宽度(基于它们包含的文本的长度).
列数根据从db中提取的数据而变化.
我在表格布局中放了一个表格示例:jsfiddle上的固定和最小宽度:http://jsfiddle.net/7d2Uj/
任何想法如何让min-width在这种情况下工作,或者为什么会这样？
推荐指数
解决办法
查看次数
css表格单元格,内容有不必要的上边距
我在我的代码中使用div块的表格单元格排列.我的代码中存在问题.
我的HTML的外观预览是这里
当我在第一个面板中有任何内容(文本或图像)时,.inner第二个和第三个面板的div具有大约10-15个像素的上边距.这是为什么 ？
任何人都可以看,让我知道我错过了什么.
推荐指数
解决办法
查看次数
CSS使两个div与显示表的高度相等
在下面的HTML中,div .left和.right具有不同的高度.是否可以在不定义高度的情况下使两个div具有相同的高度.我尝试过使用display:table但不起作用.
HTML:
<div class="wrap">
<div class="left">
Lorem
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
CSS:
.wrap{
overflow:hidden;
width:250px;
display: table;
border-collapse: collapse;
}
.left{
width:100px;
float:left;
display: table-cell;
border-bottom:1px solid green;
}
.right{
width:150px;
float:left;
border-bottom:1px solid red;
display: table-cell;
}
jsfiddle: http ://jsfiddle.net/fJbTX/1/
推荐指数
解决办法
查看次数
display:table-cell,border-spacing不能用于按钮？
所以,我正在使用display: table-cell两个按钮彼此相邻,这样如果一个文本溢出到下一行,则两个按钮的高度相同.我有border-collapse: separate并且正在使用border-spacing它们之间的空间.如果我使用类似的东西<div class="button">,它的工作正常,但是一旦我使用<button>元素,中间空间就会消失.
JSFiddle:http
://jsfiddle.net/uASbb/
现在,使用它<div>现在很好(如果不是在语义上准确),所以我大多只是好奇,如果有人知道这里到底发生了什么.
注意:我也注意到<input>在相同情况下使用元素的一些(不同的)奇怪行为:http
://jsfiddle.net/G5SFX/1/这些实例中
是否display: table-cell不支持？这是一个错误吗？
谢谢!
编辑:似乎你不能应用display: table-cell一个按钮; 它只是默认回到inline-block.从Chrome WebInspector中查看此屏幕截图:
现在问题仍然存在:这是故意的吗？它是规范还是只是浏览器？我们可以改变它吗？
推荐指数
解决办法
查看次数
表填充不起作用
我有一个表位于父div中,其中包含正文和其他内容.我有以下似乎不起作用的CSS:
table {width:100%; padding: 0 50px 0 50px;}
当我使用边距而不是填充时,它可以工作 - 但是,宽度:100%,使用边距将整个事物从父div中移出.我想我可以减小宽度或指定精确的像素数量,但网站的其余部分随着屏幕尺寸而缩放,我也希望这样工作.
推荐指数
解决办法
查看次数
Bootstrap逆表和thead没有正确的样式
在处理基于Bootstrap的项目时,我遇到了一个奇怪的问题,其中一些样式被用户代理样式表(在Chrome和Firefox中)覆盖.我找到了这个相关的问题,通过包含<!DOCTYPE html>我最初省略的标签解决了这个问题.但现在我无法得到.table-inverse,.thead-inverse或.thead-default类遮阳我的表头.据我所知,我有所有必要的行,容器等.
为什么阴影不起作用？
.navbar {
border-radius: 0px
}<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<h2 class="display-1">Bootstrap 4 Inverse Table</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-inverse">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>推荐指数
解决办法
查看次数
具有流体高度的表Rowspan的CSS等效
我正在尝试使用CSS完成以下操作:
<table border="1" width="300px">
<tr>
<td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
<td>Here is some sample text. And some additional sample text.</td>
</tr>
<tr>
<td>Here is some sample text. And some additional sample text.</td>
</tr>
</table>
我见过的用于实现此目的的示例利用固定高度或允许内容环绕左列.有没有一种优雅的方法来使用CSS实现这一目标？
推荐指数
解决办法
查看次数
显示CSS3 border-radius:table-row元素
这是我的布局:
<div class="divContainer">
<div class="item">
<div class="itemHeader"></div>
<div class="itemBody"><div>
<div class="itemFlag"></div>
</div>
....
</div>
而CSS:
.divContainer{
display:table;
border-spacing:0 5px; //bottom spacing
width:100%;
}
.item{
display:table-row;
height:45px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.itemHeader, .itemBody, .itemFlag{
display:table-cell;
}
.itemHeader{
width:100px;
}
.itemBody{
width:150px;
}
.itemFlag{
width:20px;
}
圆形边框不会出现在item元素上.
如果我将它们分开放入itemHeader并itemFlag出现.
但我真的想清除一些代码并将它们放入item
也无法获得在divContainer课堂上工作的半径.我想要一个包含圆形行的圆形容器.
问题是什么？也许CSS的另一部分搞砸了,但事实并非如此.
推荐指数
解决办法
查看次数
DIV内联块+宽度100%
我不能在一行中显示几个DIV.display: inline-block并且float: left不起作用.我的网站宽度不是fixed那么我希望它是动态的适合任何宽度的屏幕.
HTML:
<div id="all">
<div id="a">25px</div>
<div id="b">200px</div>
<div id="c">
<div id="c1">100%</div>
<div id="c2">100%</div>
<div id="c3">100%</div>
</div>
500px
</div>
CSS:
DIV {
margin:5px;
font-size:10px;
}
DIV#all {
width:500px;
border:1px dotted black;
}
DIV#a {
display:inline-block;
width:25px;
height:200px;
border:1px solid red;
color:red;
}
DIV#b {
display:inline-block;
width:150px;
height:200px;
border:1px solid green;
color:green;
}
DIV#c {
display:inline-block;
width:auto;
height:200px;
border:1px solid blue;
color:blue;
}
DIV#c1 {
width:auto;
border:1px dotted blue;
color:blue;
}
DIV#c2 { …推荐指数
解决办法
查看次数
标签 统计
css-tables ×10
css ×8
html ×6
css3 ×2
html-table ×2
button ×1
input ×1
margin ×1
padding ×1
tablelayout ×1