如何在结构不连接时用css近似表格布局 [英] How to approximate table layout with css when structure is disjointed
问题描述
我有一些HTML,我想使用display:table css属性来控制。不幸的是,我实际上不能改变HTML(或JS),只有CSS(长故事)。这是一个问题,因为现有HTML的结构导致表布局的麻烦。以下是HTML和CSS的简化版本:
I have some HTML which I want to use display: table css attributes to control. Unfortunately, I cannot actually change the HTML (or JS either), only the CSS (long story). This is a problem, because the structure of the existing HTML is causing trouble for the table layout. Here is a simplified version of the HTML and CSS:
<style>
.like-table { display: table;}
.like-tr { display: table-row;}
.like-th { display: table-cell; border: 1px solid gray;}
.useless-div-1 { }
.useless-div-2 { }
.like-td { display: table-cell; border: 1px solid gray;}
</style>
<div class="like-table">
<div class="like-tr">
<div class="like-th">1</div>
<div class="like-th">22</div>
<div class="like-th">3</div>
</div>
<div class="useless-div-1"><div class="useless-div-2">
<div class="like-tr">
<div class="like-td">111</div>
<div class="like-td">2</div>
<div class="like-td">3</div>
</div>
<div class="like-tr">
<div class="like-td">11</div>
<div class="like-td">2</div>
<div class="like-td">333</div>
</div>
</div></div>
</div>
很不幸,这会使标题和正文列的宽度不同:
Sadly, this renders the header and body columns width different widths:
>
如果我删除useless-div- *打开和关闭标签:
If I remove the "useless-div-*" open and closing tags:
<div class="like-table">
<div class="like-tr">
<div class="like-th">1</div>
<div class="like-th">22</div>
<div class="like-th">3</div>
</div>
<div class="like-tr">
<div class="like-td">111</div>
<div class="like-td">2</div>
<div class="like-td">3</div>
</div>
<div class="like-tr">
<div class="like-td">11</div>
<div class="like-td">2</div>
<div class="like-td">333</div>
</div>
</div>
然后,它会渲染精细,对齐标题和正文列宽度:
Then it renders fine, aligning header and body column widths:
>
所以,有什么我可以做的CSS,将导致第一组HTML的行为像第二个?记住我不能修改HTML或JavaScript - 只有CSS !请不要问为什么...
So, is there anything I can do to the CSS that will cause the first set of HTML to behave like the second? Remember I cannot modify the HTML or JavaScript -- only the CSS! Please do not ask why...
推荐答案
因为你要包装 table-row
元素
useless-div
,你可以简单地设置 display useless-div
至 table-row-group
:
Since you're wrapping table-row
elements by useless-div
, you could simply set display
property of useless-div
to table-row-group
:
.useless-div { display: table-row-group; }
在CSS表布局中,所有元素应遵循相同的结构属性。
In CSS table layouts, all elements should follow the same structural properties.
以下是 JSBin演示 。
Here is the JSBin Demo.
在 之后,我抓住了我的头5个小时,我意识到这是不可能通过当前的方式来处理这个。
After scratching my head for the past 5 hours over this, I realized that it's impossible to handle this by the current way.
决定编写新的样式来创建一个灵活的CSS表。但我首先要提到几个事情:
So, I decided to write new styles to create a flexible CSS table. But I should mention a few things at first:
- 要保持列垂直排列,需要为单元格设置特定宽度。 li>
- 在以下示例中,我设置边框以更好地显示表。因为这样,我使用
box-sizing
属性来强制浏览器计算每个单元格的宽度,包括其填充和边框。如果您不需要border
,请删除它和border-box
属性。
- To keep the columns aligned vertically, setting a specific width to cells is required.
- In the following example, I set borders to display the table better. because of that, I used
box-sizing
property to force browser to calculate the width of each cell including its padding and border. If you don't needborder
, remove it and theborder-box
property as well.
.like-table {
width: 400px; /* You could declare a specific width. Your choice */
margin: 0 auto;
}
.like-th, .like-td {
float: left; /* <-- Float the cells to stick together */
width: 33.33%; /* <-- I applied the same width on each cell. */
/* I've explained how to set specific width for each column in the following */
border: 1px solid gray; /* Add border around each cell */
-webkit-box-sizing: border-box; /* Force browser to calculate width+borders */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.like-tr:after { /* Clearfix hack */
content: ' ';
font: 0/0 a;
display: block;
clear: both;
}
注意: (左+中心+右),首先在每个单元格上设置 width
以下选择器覆盖左和右列的应用宽度:
Note: To apply specific width on each column (left + center + right), First set a width
on each cell as I did at above, then use the following selectors to override the applied width for left and right columns:
.like-table .like-td:first-child, /* Selectors for the left column */
.like-table .like-th:first-child {
width: 100px; /* <-- Override the width for the left column */
border-right: 0; /* You might also want to remove right borders */
}
.like-table .like-td:last-child, /* Selectors for the right column */
.like-table .like-th:last-child {
width: 100px; /* <-- Override the width for the right column */
border-left: 0; /* You might also want to remove left borders */
}
a href =http://jsbin.com/InuhIWO/5/edit =nofollow> JSBin演示#1 。 (流体宽度)
JSBin Demo#2 。 (固定宽度)
这篇关于如何在结构不连接时用css近似表格布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!