Question

我目前有一张桌子：

<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;}

看起来像这样：

enter image description here

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

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

很抱歉发布了“为我做这个”的问题，但多次尝试已将我的键盘留在墙上。：）

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;
}

Answer 2

下面使用浮动div和负边距。我还使用middleleft和middleright元素包装内容，以便它们继承内容本身的高度并将边框拉伸到适当的高度。

注意，由于边距为负，您可能希望查看middlecenter元素上的边距。

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

<div class="blockcontainer">
    <div class="header topcentergrey">
        <div class="topleftgrey"></div>
        This is a title
        <div class="toprightgrey"></div>
    </div>
    <div class="middleleft">
        <div class="middleright">
            <div class="middlecenter">
                <div class="row">
                    <div>This is left</div>
                    <div class="right">Right</div>
                </div>
                <div class="row">
                    <div>This is left</div>
                    <div class="right">Right</div>
                </div>
                <div class="row">
                    <div>This is left</div>
                    <div class="right">Right</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottomleft"></div>
    <div class="bottomright"></div>
    <div class="bottomcenter"></div>
</div>

http://jsfiddle.net/userdude/FtCLJ/4/

Answer 3

检查这个小提琴 - http://jsfiddle.net/aniketpant/ePARN/

我删除了所有图像的使用，它是纯CSS。

HTML

<div id="blockcontainer">
    <dl>
        <dt class="title">FAQ Categories</dt>
        <dt>Some content goes here</dt>
        <dt>Some content goes here</dt>
        <dt>Some content goes here</dt>
        <dt>Some content goes here</dt>
    </dl>
</div>

CSS

#blockcontainer {
    border: 2px solid #ddd;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#blockcontainer dl dt.title {
    font-size: 1.25em;
    border-bottom: 2px solid #ddd;
    background: -moz-linear-gradient(top, #eee, #ddd, #fff); /* FF 3.6+ */  
    background: -ms-linear-gradient(top, #eee, #ddd, #fff); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(50%, #ddd), color-stop(100%, #fff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(top, #eee, #ddd, #fff); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(top, #eee, #ddd, #fff); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(top, #eee, #ddd, #fff); /* the standard */  
}

#blockcontainer dl {
}

#blockcontainer dl dt {
    padding: 5px;
}

Answer 4

理想情况下，你应该使用Ul和Li（更加语义）来导航而不是表格标签。使用表格只会搞砸整个布局。如果我是你，我会选择960 gs并选择grid_1

<div class="grid_1">
<div id="sidenavi">
<ul>
<li>Home</li>
<li>FaQ</li>
<li>some here</li>
<li>others here</li>
</ul>
</div>
</div>

我的css会说：

#sidenavi ul li
{
#background ......
}

我希望它适合你。代码将更短，更高效，并按语义：）

将表格布局转换为div等效

4 个答案:

HTML

CSS