html - 使 div 的行为像一个表，而不使用显示 : table

Question

JSFiddle with the problem

标题应该与内容很好地对齐

一切都允许，只是不使用表格元素

<div style="">
    <div style="">
        <span  class="" >Firstname</span>
        <span  class="" >Lastname</span>
    </div>
    <div style="" class="">
        <span class=""  style=""> Tom </span>
        <span class=""  style=""> Jones </span>
    </div>
    <div style="" class="">
        <span class=""  style=""> Micheal </span>
        <span class=""  style=""> Jackson </span>
    </div>
    <div style="" class="">
        <span class=""  style=""> SomedudewithsuperlongFirstname </span>
        <span class=""  style=""> SomedudewithsuperlongLastname </span>
    </div>
</div>

CSS:

   span{
        display: inline-block;
        min-width: 100px;
    }
    div div {
        min-width: 100px;
    }

Answer 1

前奏

虽然您对使用表格感到厌倦是对的，但如果您使用它们来表示表格数据，那很好!

但是，正如您所说的那样，它们有很多警告；特别是某些浏览器如何以不同方式解释它们，如您的 Firefox 4 example 所示在评论区。

虽然我认为上述一些问题可以通过 CSS 来解决 table styles 、黑客和解决方法，我认为不值得麻烦或开销。

如果您对 HTML 表格或 CSS 表格样式不满意，我们可以模仿一些 <table>属性。

HTML

<div id="container">
    <div class="children">
        <p><span>Firstname</span></p>
        <p><span>Tom</span></p>     
        <p><span>SomedudewithsuperlongFirstname</span></p>     
    </div>
    <div class="children">
        <p><span>Lastname</span></p>
        <p><span>Jones</span></p>
        <p><span>SomedudewithsuperlongLastname</span></p>   
    </div>  
</div>

CSS

#container{
    display: block;
    border: 1px dashed #ccc;    
    width: 500px;
    margin: 0 auto;
}
.children{
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.children > p > span{
    vertical-align: middle;
}

DEMO