html - 将表格布局转换为等效的 div

Question

我目前有一张 table :

<table id="blockcontainer">
    <tr>
        <td class="topleftgrey"></td>
        <td class="topcentergrey">
            <span class="sharemedium">FAQ</span> <span class="headingmedium">Categories</span>
        </td>
        <td class="toprightgrey"></td>
    </tr>
    <tr>
        <td class="middleleft"></td>
        <td class="middlecenter">
            some content goes here
        </td>
        <td class="middleright"></td>
    </tr>
    <tr>
        <td class="bottomleft"></td>
        <td class="bottomcenter"></td>
        <td class="bottomright"></td>
    </tr>
</table>

使用 CSS:

#blockcontainer {width:100%;}
#blockcontainer .topleft{background:url(../../Content/Images/top-left.png) no-   repeat;width:8px;height:52px;}
#blockcontainer .topcenter{background:url(../../Content/Images/top-center.png) repeat-x;height:52px;color:#fff;padding-left:5px;font-size: large;text-align: left;}
#blockcontainer .topright{background:url(../../Content/Images/top-right.png) no-repeat;width:8px;height:52px;}
#blockcontainer .topleftgrey{background:url(../../Content/Images/top-leftgrey.png) no-repeat;width:8px;height:52px;text-align: left;}
#blockcontainer .topcentergrey{background:url(../../Content/Images/top-centergrey.png) repeat-x;height:52px;padding-left:5px;font-size:large;text-align: left;}
#blockcontainer .toprightgrey{background:url(../../Content/Images/top-rightgrey.png) no-repeat;width:8px;height:52px;text-align: left;}
#blockcontainer .middleleft{background:url(../../Content/Images/middle-left.png) repeat-y;width:8px;}
#blockcontainer .middlecenter{background-color:#fff;padding:5px;}
#blockcontainer .middleright{background:url(../../Content/Images/middle-right.png) repeat-y;width:8px;}
#blockcontainer .bottomleft{background:url(../../Content/Images/bottom-left.png) no-repeat;width:8px;height:8px;}
#blockcontainer .bottomcenter{background:url(../../Content/Images/bottom-center.png) repeat-x;height:8px;}
#blockcontainer .bottomright{background:url(../../Content/Images/bottom-right.png) no-repeat;width:8px;height:8px;}

看起来像这样:

我遇到的问题是一个页面上有多个这样的表(这个表充当我的内容容器)，并且由于表在浏览器中加载的方式，页面加载速度非常慢。

我知道将其转换为 div 会使世界变得不同，但我无法将此表结构转换为等效的 div 结构。

很抱歉发布了一个“帮我做”的问题，但是多次尝试已经在我的墙上留下了一 block 键盘。 :)

Here is the jsfiddle example

Answer 1

Aniket 先于我，但我相信我的是对当前图像和基于表格的代码的更准确的 CSS 再现:

http://jsfiddle.net/purmou/YyHKf/

它使用 CSS3 box-shadow(以及浏览器前缀版本以实现兼容性)和渐变背景(仅在 Opera 中不起作用，但这是一个简单的添加)。

HTML:

<div class="container" id="container1">
    <div class="header" id="header1">
        FAQ Categories
    </div>
    <div class="content" id="content1">
        <div>content
            <div class="right">5
            </div>
        </div>
    </div>
</div>

CSS:

.container {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    background: #fff;
    width:100%;
}

.header {
    padding:5px;
    background:#eeeeee;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee');
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background: -moz-linear-gradient(top,  #fff,  #eee);
  height:40px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom:1px #888 solid;
    -moz-box-shadow: 0 1px 3px #888;
    -webkit-box-shadow: 0 1px 3px#888;
    box-shadow: 0 1px 3px #888;
}

.content {
    padding:0 5px 10px 5px;
    margin-top:3px;
    background-color:#ffffff;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}

.content div {
    padding:5px 5px 5px 5px;
    border-bottom:1px #ccc solid;
}

.content .right {
    float:right;
    border:none;
}