[英]CSS div table styling
I am trying to style a div table using css. 我正在尝试使用CSS样式div表。 Here is my sample working code:
这是我的示例工作代码:
HTML: HTML:
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
Sidebar area
</div>
<div class="mycolumn" id="content">
<p>content area</p>
<p>some more content</p>
</div>
</div>
</div>
</div>
CSS CSS
#sidebar{
width: 250px;
background-color: #eaeff1;
}
.table-row {
display: table-row;
}
.mycolumn {
display: table-cell;
padding: 15px;
}
#content {
background-color:#00eff0;
/* width:100%; */
}
div {
outline: 1px solid #3a87ad;
}
http://jsfiddle.net/gbovzuqm/ http://jsfiddle.net/gbovzuqm/
How can I get content area div to cover up all the remaining space at the back? 如何获得内容区域div来覆盖背面的所有剩余空间? I have tried by apply
width:100%
to it, but it will squeeze the sidebar area. 我尝试通过将
width:100%
应用于它,但是它将挤压侧边栏区域。
How can I do it with CSS styling? 如何使用CSS样式?
no need to use display:table-row
use this 无需使用
display:table-row
使用此
.table-row {
display: table;
width: 100%;
}
Inorder to correct this you can do like this 为了纠正这个问题,你可以这样做
.table-row {
display: table; //replace display:table-row;
width: 100%;
}
If you have set display: table-cell
, it only makes sense to also set display: table-row
and display: table
to its ancestors in order to simulate a table. 如果已设置
display: table-cell
,则还必须将display: table-row
和display: table
设置为其祖先,以模拟表。
Click here to see updated fiddle 点击这里查看更新的小提琴
This question could be purely academic, but just some things to think about in case you're really doing this in a real life production system: why would you want to use <div>
to simulate tables and cells when you could simply use <table>
, <tr>
and <td>
? 这个问题可能纯粹是学术性的,但是如果您在现实生活的生产系统中确实要这样做,则需要考虑一些事情:为什么当您只想使用
<table>
时,为什么要使用<div>
模拟表和单元格? <table>
, <tr>
和<td>
?
Also, from the words used inside the cell data, it sounds like you're using <div>
as a disguise for tables in order to do page layout. 同样,从单元格数据中使用的单词来看,听起来好像您正在使用
<div>
作为表格的伪装以便进行页面布局。 PLEASE don't do this in real life. 请不要在现实生活中这样做。 Tables for layout are hated for good reason;
布局表很令人讨厌; disguising them using other HTML tags is an even worse thing to do.
使用其他HTML标签伪装它们是一件更糟糕的事情。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.