CSS地狱模拟TABLE与DIV [英] CSS Hell simulating TABLE with DIV

查看：189
本文介绍了CSS地狱模拟TABLE与DIV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图只使用CSS和DIV来模拟表格。问题是，我做的没有什么可以完美地模拟表布局的行为。



下面是我想要的表格布局，紧接着这一个，我可以实现CSS / DIV：





Html / CSS 



 <！DOCTYPE html PUBLIC  -  // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =en> 
< head> 
< title> Teste< / title> 
< style type =text / css> 
 table {
 table-layout：fixed; 
 width：333px; 
 border-width：1px; 
 border-spacing：2px; 
 border-style：solid; 
 border-color：black; 
 border-collapse：collapse; 
} 
 
 table th，table td 
 {
 border-width：1px; 
 padding：1px; 
 border-style：solid; 
 border-color：black; 
 border-collapse：collapse; 
} 
 
 table th.column1，table td.column1 {
 width：60px; 
 background-color：＃CCD9FF; 
} 
 
 table th.column2，table td.column2 {
 width：100px; 
 background-color：＃ECFFE5; 
} 
 
 table th.column3，table td.column3 {
 width：60px; 
 background-color：＃FFEBE5; 
} 
 
 table th.column4，table td.column4 {
 width：100px; 
 background-color：#FFFFCC; 
} 
 
 div＃tablecontainer 
 {
 width：328px; 
} 
 
 div.tablecontainerrow 
 {
 clear：both; 
} 
 
 div＃tablecontainer div div.column1 
 {
 width：60px; 
 float：left; 
 border：1px solid black; 
 background-color：＃CCD9FF; 
} 
 
 div＃tablecontainer div div.column2 
 {
 width：100px; 
 float：left; 
 border：1px solid black; 
 background-color：＃ECFFE5; 
} 
 
 div＃tablecontainer div div.column3 
 {
 width：60px; 
 float：left; 
 border：1px solid black; 
 background-color：＃FFEBE5; 
} 
 
 div＃tablecontainer div div.column4 
 {
 width：100px; 
 float：left; 
 border：1px solid black; 
 background-color：#FFFFCC; 
} 
 
 
< / style> 
< / head> 
< body> 
< h1> CSS和TABLE< / h1> 
< table> 
< tr> 
< th class =column1>标题1< / th> 
< th class =column2>标题2< / th> 
< th class =column3>标题3< / th> 
< th class =column4>标题4< / th> 
< / tr> 
< tr> 
< td class =column1>第1行第1列< / td> 
< td class =column2>第1行第2列< / td> 
< td class =column3>第1行第3列< / td> 
< td class =column4>第2行第4列< / td> 
< / tr> 
< tr> 
< td class =column1>第2行第1列< / td> 
< td class =column2>第2行第2列< / td> 
< td class =column3>第2行第3列< / td> 
< td class =column4>第2行第4列< / td> 
< / tr> 
< tr> 
< td class =column1>第3行第1列< / td> 
< td class =column2>第3行第2列< / td> 
< td class =column3>第3行第3列（更多内容）< / td> 
< td class =column4>第3行第4列< / td> 
< / tr> 
< / table> 
< h1> CSS和DIV< / h1> 
< div id =tablecontainer> 
< div class =tablecontainerrow> 
< div class =column1>标题1< / div> 
< div class =column2>标头2< / div> 
< div class =column3>标题3< / div> 
< div class =column4>标题4< / div> 
< div class =clear/> 
< / div> 
< div class =tablecontainerrow> 
< div class =column1>第1行第1列< / div> 
< div class =column2>第1行第2列< / div> 
< div class =column3>第1行第3列< / div> 
< div class =column4>第1行第4列< / div> 
< / div> 
< div class =tablecontainerrow> 
< div class =column1>第2行第1列< / div> 
< div class =column2>第2行第2列< / div> 
< div class =column3>第2行第3列< / div> 
< div class =column4>第2行第4列< / div> 
< / div> 
< div class =tablecontainerrow> 
< div class =column1>第3行第1列< / div> 
< div class =column2>第3行第2列< / div> 
< div class =column3>第3行第3列（更多内容）< / div> 
< div class =column4>第3行第4列< / div> 
< / div> 
< / div> 
< / body> 
< / html>

我可以修改什么以允许CSS / DIV布局类似于CSS /表？



一些补充信息





  • 一个挑战）。所以请不要提供给我答案，说使用表是更好的解决方案。

  • 事实上，我想知道一个解决方案可以完全改变数据的表格布局另一个只是改变CSS。在这种情况下，< table> 的使用是没有问题的。

  • 我想要兼容IE 7+，FF3 + Chrome 4 +。


谢谢！



但是，如果这只是一个CSS练习，踢... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...




  • 将< div class =clear/> / li>
  • 改变背景颜色，改用 faux-columns

  • 不要在各个单元格之间放置边框;



像这样： http://jsfiddle.net/39F88/ 

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Strict // ENhttp：// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =en> 
< head> 
< title> Teste< / title> 
< style type =text / css> 
 table {
 table-layout：fixed; 
 width：333px; 
 border-width：1px; 
 border-spacing：2px; 
 border-style：solid; 
 border-color：black; 
 border-collapse：collapse; 
} 
 
 table th，table td 
 {
 border-width：1px; 
 padding：1px; 
 border-style：solid; 
 border-color：black; 
 border-collapse：collapse; 
} 
 
 table th.column1，table td.column1 {
 width：60px; 
 background-color：＃CCD9FF; 
} 
 
 table th.column2，table td.column2 {
 width：100px; 
 background-color：＃ECFFE5; 
} 
 
 table th.column3，table td.column3 {
 width：60px; 
 background-color：＃FFEBE5; 
} 
 
 table th.column4，table td.column4 {
 width：100px; 
 background-color：#FFFFCC; 
} 
 
 div＃tablecontainer 
 {
 width：335px; 
 border-top：1px solid black; 
 background：url（http://i.stack.imgur.com/ZsO5U.png）TOP LEFT REPEAT-Y; 
} 
 
 div.tablecontainerrow 
 {
 clear：both; 
 overflow：hidden; 
 border：1px solid black; 
 border-top：none; 
} 
 
 div＃tablecontainer div div.column1 
 {
 width：62px; 
 float：left; 
} 
 
 div＃tablecontainer div div.column2 
 {
 width：104px; 
 float：left; 
} 
 
 div＃tablecontainer div div.column3 
 {
 width：62px; 
 float：left; 
} 
 
 div＃tablecontainer div div.column4 
 {
 width：104px; 
 float：left; 
} 
 
 
< / style> 
< / head> 
< body> 
< h1> CSS和TABLE< / h1> 
< table> 
< tr> 
< th class =column1>标题1< / th> 
< th class =column2>标题2< / th> 
< th class =column3>标题3< / th> 
< th class =column4>标题4< / th> 
< / tr> 
< tr> 
< td class =column1>第1行第1列< / td> 
< td class =column2>第1行第2列< / td> 
< td class =column3>第1行第3列< / td> 
< td class =column4>第2行第4列< / td> 
< / tr> 
< tr> 
< td class =column1>第2行第1列< / td> 
< td class =column2>第2行第2列< / td> 
< td class =column3>第2行第3列< / td> 
< td class =column4>第2行第4列< / td> 
< / tr> 
< tr> 
< td class =column1>第3行第1列< / td> 
< td class =column2>第3行第2列< / td> 
< td class =column3>第3行第3列（更多内容）< / td> 
< td class =column4>第3行第4列< / td> 
< / tr> 
< / table> 
< h1> CSS和DIV< / h1> 
< div id =tablecontainer> 
< div class =tablecontainerrow> 
< div class =column1>标题1< / div> 
< div class =column2>标头2< / div> 
< div class =column3>标题3< / div> 
< div class =column4>标题4< / div> 
< / div> 
< div class =tablecontainerrow> 
< div class =column1>第1行第1列< / div> 
< div class =column2>第1行第2列< / div> 
< div class =column3>第1行第3列< / div> 
< div class =column4>第1行第4列< / div> 
< / div> 
< div class =tablecontainerrow> 
< div class =column1>第2行第1列< / div> 
< div class =column2>第2行第2列< / div> 
< div class =column3>第2行第3列< / div> 
< div class =column4>第2行第4列< / div> 
< / div> 
< div class =tablecontainerrow> 
< div class =column1>第3行第1列< / div> 
< div class =column2>第3行第2列< / div> 
< div class =column3>第3行第3列（更多内容）< / div> 
< div class =column4>第3行第4列< / div> 
< / div> 
< / div> 
< / body> 
< / html>


I´m trying to simulate a table using only CSS and DIV. The problem is that nothing that I do can perfectly simulate a table layout behavior.

Below is the table layout that I want and immediately below this one, what I could achieve with CSS/DIV:

Html/CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Teste</title>
    <style type="text/css">
        table{
            table-layout:fixed;
            width: 333px;
            border-width: 1px;
            border-spacing: 2px;
            border-style: solid;
            border-color: black;
            border-collapse: collapse;
        }

        table th, table td
        {
            border-width: 1px;
            padding: 1px;
            border-style: solid;
            border-color: black;
            border-collapse: collapse;
        }

        table th.column1, table td.column1{
            width:60px;
            background-color:#CCD9FF;
        }

        table th.column2, table td.column2{
            width:100px;
            background-color:#ECFFE5;
        }

        table th.column3, table td.column3{
            width:60px;
            background-color:#FFEBE5;
        }

        table th.column4, table td.column4{
            width:100px;
            background-color: #FFFFCC;
        }

        div#tablecontainer
        {
            width: 328px;
        }

        div.tablecontainerrow
        {
            clear:both;
        }

        div#tablecontainer div div.column1
        {
            width: 60px;
            float:left;
            border: 1px solid black;
            background-color:#CCD9FF;            
        }

        div#tablecontainer div div.column2
        {
            width: 100px;
            float:left;
            border: 1px solid black;
            background-color:#ECFFE5;            
        }

        div#tablecontainer div div.column3
        {
            width: 60px;
            float:left;
            border: 1px solid black;
            background-color:#FFEBE5;            
        }

        div#tablecontainer div div.column4
        {
            width: 100px;
            float:left;
            border: 1px solid black;
            background-color:#FFFFCC;            
        }


    </style>
</head>
<body>
    <h1>CSS and TABLE</h1>
    <table>
        <tr>
            <th class="column1">Header 1</th>
            <th class="column2">Header 2</th>
            <th class="column3">Header 3</th>
            <th class="column4">Header 4</th>
        </tr>
        <tr>
            <td class="column1">line 1 column 1</td>
            <td class="column2">line 1 column 2</td>
            <td class="column3">line 1 column 3</td>
            <td class="column4">line 2 column 4</td>
        </tr>
        <tr>
            <td class="column1">line 2 column 1</td>
            <td class="column2">line 2 column 2</td>
            <td class="column3">line 2 column 3</td>
            <td class="column4">line 2 column 4</td>
        </tr>
        <tr>
            <td class="column1">line 3 column 1</td>
            <td class="column2">line 3 column 2</td>
            <td class="column3">line 3 column 3 (more content)</td>
            <td class="column4">line 3 column 4</td>
        </tr>
    </table>
    <h1>CSS and DIV</h1>
    <div id="tablecontainer">
        <div class="tablecontainerrow">
            <div class="column1">Header 1</div>
            <div class="column2">Header 2</div>
            <div class="column3">Header 3</div>
            <div class="column4">Header 4</div>
            <div class="clear" />
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 1 column 1</div>
            <div class="column2">line 1 column 2</div>
            <div class="column3">line 1 column 3</div>
            <div class="column4">line 1 column 4</div>
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 2 column 1</div>
            <div class="column2">line 2 column 2</div>
            <div class="column3">line 2 column 3</div>
            <div class="column4">line 2 column 4</div>
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 3 column 1</div>
            <div class="column2">line 3 column 2</div>
            <div class="column3">line 3 column 3 (more content)</div>
            <div class="column4">line 3 column 4</div>
        </div>
    </div>
</body>
</html>

What might I modify to allow the CSS/DIV layout resembles the CSS/Table?

Some complementary information

  • Think in this as an exercise (a challenge). So please do not provide me answers saying the use of a table is a better solution for this situation.
  • In fact I´m wondering a solution that can change completely the tabular layout of data to another one simply changing the CSS. In this case, the use of <table> is out of question.
  • I want compatibility with IE 7+, FF3+, Chrome 4+.

Thanks!

解决方案

Again, you should use a table.

But if this is just an exercise in CSS, for kicks...

  • Ditch the <div class="clear" />.
  • Ditch the background colors and use faux-columns instead.
  • Don't put borders around the individual cells; instead put them around the rows.
  • Give the rows an overflow:hidden

Like so: http://jsfiddle.net/39F88/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Teste</title>
    <style type="text/css">
        table{
            table-layout:fixed;
            width: 333px;
            border-width: 1px;
            border-spacing: 2px;
            border-style: solid;
            border-color: black;
            border-collapse: collapse;
        }

        table th, table td
        {
            border-width: 1px;
            padding: 1px;
            border-style: solid;
            border-color: black;
            border-collapse: collapse;
        }

        table th.column1, table td.column1{
            width:60px;
            background-color:#CCD9FF;
        }

        table th.column2, table td.column2{
            width:100px;
            background-color:#ECFFE5;
        }

        table th.column3, table td.column3{
            width:60px;
            background-color:#FFEBE5;
        }

        table th.column4, table td.column4{
            width:100px;
            background-color: #FFFFCC;
        }

        div#tablecontainer
        {
            width:335px;
            border-top:1px solid black;
            background:url(http://i.stack.imgur.com/ZsO5U.png) TOP LEFT REPEAT-Y;
        }

        div.tablecontainerrow
        {
            clear:both;
            overflow:hidden;
            border:1px solid black;
            border-top:none;
        }

        div#tablecontainer div div.column1
        {
            width: 62px;
            float:left;
        }

        div#tablecontainer div div.column2
        {
            width: 104px;
            float:left;
        }

        div#tablecontainer div div.column3
        {
            width: 62px;
            float:left;
        }

        div#tablecontainer div div.column4
        {
            width: 104px;
            float:left;
        }


    </style>
</head>
<body>
    <h1>CSS and TABLE</h1>
    <table>
        <tr>
            <th class="column1">Header 1</th>
            <th class="column2">Header 2</th>
            <th class="column3">Header 3</th>
            <th class="column4">Header 4</th>
        </tr>
        <tr>
            <td class="column1">line 1 column 1</td>
            <td class="column2">line 1 column 2</td>
            <td class="column3">line 1 column 3</td>
            <td class="column4">line 2 column 4</td>
        </tr>
        <tr>
            <td class="column1">line 2 column 1</td>
            <td class="column2">line 2 column 2</td>
            <td class="column3">line 2 column 3</td>
            <td class="column4">line 2 column 4</td>
        </tr>
        <tr>
            <td class="column1">line 3 column 1</td>
            <td class="column2">line 3 column 2</td>
            <td class="column3">line 3 column 3 (more content)</td>
            <td class="column4">line 3 column 4</td>
        </tr>
    </table>
    <h1>CSS and DIV</h1>
    <div id="tablecontainer">
        <div class="tablecontainerrow">
            <div class="column1">Header 1</div>
            <div class="column2">Header 2</div>
            <div class="column3">Header 3</div>
            <div class="column4">Header 4</div>
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 1 column 1</div>
            <div class="column2">line 1 column 2</div>
            <div class="column3">line 1 column 3</div>
            <div class="column4">line 1 column 4</div>
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 2 column 1</div>
            <div class="column2">line 2 column 2</div>
            <div class="column3">line 2 column 3</div>
            <div class="column4">line 2 column 4</div>
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 3 column 1</div>
            <div class="column2">line 3 column 2</div>
            <div class="column3">line 3 column 3 (more content)</div>
            <div class="column4">line 3 column 4</div>
        </div>
    </div>
</body>
</html>

这篇关于CSS地狱模拟TABLE与DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆