当结构不连贯时如何用css来近似表格布局
我有一些我想要使用的HTML显示：表格CSS属性来控制。 不幸的是，我实际上无法改变HTML（或者JS），只有CSS（长篇故事）。 这是一个问题，因为现有HTML的结构给表格布局带来麻烦。 以下是HTML和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>
可悲的是，这使得头和主体列宽度不同：
如果我删除“无用的div”*打开和关闭标记：
<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>
然后它呈现很好的对齐标题和主体列的宽度：
那么，有什么我可以对CSS做些什么来使第一组HTML像第二组一样行事？ 请记住，我无法修改HTML或JavaScript - 只有CSS！ 请不要问为什么...
点击这里修改代码。
既然你用useless-div来包装table-row元素，你可以简单地将useless-div display属性设置为table-row-group ：
.useless-div { display: table-row-group; }
在CSS表格布局中，所有元素应该遵循相同的结构属性。
这里是JSBin演示 。
更新
在过去的5个小时里，我一直在摸摸自己的脑袋，然后意识到以目前的方式来解决这个问题是不可能的。
所以，我决定编写新的样式来创建一个灵活的CSS表格。 但我首先应该提到几件事情：
box-sizing属性来强制浏览器计算每个单元格的宽度，包括其填充和边框。 如果您不需要border ，请将其移除并将border-box属性也移除。 该方法
.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 ，然后使用以下选择器覆盖左列和右列的应用宽度：
.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 */
}
JSBin演示＃1 。 （流体宽度）
JSBin Demo＃2 。 （固定宽度）
链接地址: http://www.djcxy.com/p/88285.html上一篇: How to approximate table layout with css when structure is disjointed