使用CSS，尝试将多个表并排居中对齐

Using CSS, trying to center and align multiple tables side by side

本文关键字：对齐 CSS 使用      更新时间：2023-09-26

我有一个标题栏，我试图在其中创建3个部分：左、中、右。

所有内容都必须垂直居中，并与IE7向后兼容，这就是我使用表的原因，除非你有更简单的解决方案。

正如您现在看到的，中心内容表正在堆叠。如何设置样式以使表格并排对齐？

演示：http://jsfiddle.net/drvn9x26/35/

更新：我尝试了一个建议。这些表现在是并排的，但你会注意到，当其中一个表高亮显示时，格式设置关闭时，它仍然不太正确。我还需要高亮显示的蓝色内容来准确填充容器。

更新2：好的，我刚刚意识到问题的一部分。我的浏览器放大了125%。。。当我缩小时，容器和底部之间实际上没有1个像素的空间。

更新3：保罗提供了一个对我有效的解决方案。我感谢所有的建议。

.container{
    white-space: nowrap;
    background-color: red;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    float: none;
    position: fixed;
}
table {
    height: 50px;
    border-spacing: 0px;
}
td {
    padding: 0px;
}
.cell-left {
    float:left;
}
.cell-selected {
    background-color:blue;
    color:white;
}
.cell-right {
    position:absolute; 
    top:0px; 
    right:0px;
}
<div class='container'>
    <div class='cell-left'>
        <table class='cell cell-selected'><tr><td>
            LEFT
        </td></tr></table>
    </div>
<center>
<table class='cell'><tr>
<td><table class='cell cell-selected'><tr><td>CENTER1</td></tr></table></td>
<td><table class='cell'><tr><td>CENTER2</td></tr></table></td>
<td><table class='cell'><tr><td>CENTER3</td></tr></table></td>
</tr></table> 
</center>
    <div class='cell-right'>
        <table class='cell'><tr><td>
            RIGHT
        </td></tr></table>
    </div>
</div>

使用td标记，而不是中间部分中的三个表。

<table class='cell'>
  <tr>
    <td>CENTER1</td>
    <td>CENTER2</td>
    <td>CENTER3</td>
  </tr>
</table>

[EDIT]版本，只有一个表http://jsfiddle.net/drvn9x26/33/

中心表的浮动div丢失了，不应该是：吗

<div  class='cell-left'><table class='cell'><tr><td>
        CENTER1
    </td></tr></table></div>
    <table class='cell'><tr><td>
        CENTER2
    </td></tr></table>
    <div  class='cell-right'><table class='cell'><tr><td>
        CENTER3
    </td></tr></table></div>

但不管怎样，为什么不为每个结构级别使用一个表，而不是为每个元素使用表呢。

请参阅DEMO 1了解堆叠表。

有关嵌套表，请参见DEMO 2。

请参阅DEMO 3了解具有突出显示功能的嵌套表（请尝试悬停！）。

请参见DEMO 4了解所有单元格的相等高度。

请参阅DEMO 5，了解调整后的最左侧和最右侧单元格以及中间单元格的宽度。

请参阅DEMO 6了解调整后的最左侧和最右侧单元格宽度，并且中心单元格尽可能小。

没有表和一点JS的可能解决方案可以在每列上设置相同的高度。.before和<span class="before"></span>在这里是:before的替代品（因为它在IE7上不起作用）

http://jsfiddle.net/OxyDesign/p3tv9n5m/

HTML

<div class='container'>
    <div class='cell cell-left'>
        <span class="before"></span><span class="cell-content">content</span>
    </div>
    <div class='cell cell-center'>
        <span class="before"></span><span class="cell-content">content<br />content<br />content</span>
    </div>
    <div class='cell cell-right'>
        <span class="before"></span><span class="cell-content">content</span>
    </div>
</div>

CSS

.container {
    position:relative;
}
.cell{
    width:33.3333333333333%;
    float:left;
}
.cell .before {
    width:0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.cell-content {
    display:inline-block;
    vertical-align:middle;
}
.cell-left{
    text-align:left;
    background:#ccc;
}
.cell-center{
    text-align:center;
    background:#ddd;
}
.cell-right{
    text-align:right;
    background:#ccc;
}

JS-

$(document).ready(function(){
    var cells = $('.cell'),
        cellsLgth = cells.length,
        maxHeight = 0;
    for(var i = 0; i < cellsLgth; i++){
        var height = cells.eq(i).height();
        if(height > maxHeight)  maxHeight = height;
    }
    cells.css('height',maxHeight);
});

.container{
white-space: nowrap;
background-color: red;
top: 0px;
left: 0px;
width: 100%;
position: fixed;
text-align:center;
}
table {
width:100%;
border-spacing: 0px;
}
table td {
width:33.3333%;
height:50px;
line-height:50px;
}

<div class='container'>
<table>
    <tr>
        <td>LEFT</td> 
        <td>CENTER</td>
        <td>RIGHT</td>
    </tr>
</table>
</div>

http://jsfiddle.net/drvn9x26/39/

相关文章：