Question

我开始更深入地研究CSS，并决定将我的网站主要由表格组成的html转换为div。

我正在尝试使用div来完成与此测试页上的表相同的操作。但是我遇到了一些问题：

无法制作列
垂直文字对齐

我走了多远： table vs div

代码：

 <style type="text/css">


body {
background-color:#000;
}


 /* TABLE CSS */
 td {
    font-family: Tahoma; 
    font-size: 12px;

}
.line {
   border-collapse:separate;
   border:1px solid #222222;
   border-spacing:1px 1px;
   margin-left:auto;
   margin-right:auto;
   background-color: #000000;
   padding: 1px;
   width:400px;

}
.topic {
    background-color:#3C0;
    font-weight: bold;
    height: 23px;
    color:#FFF;
    text-align:center;
}
.row {
    background-color: #111111;

    border-bottom: 1px solid black;
    color: #ffffff;
    height:12px;
    line-height:21px;
    padding:0px; 
}
.row:Hover {
    background-color: #252525;
}

/* DIV CSS */
div.line {
   border-collapse:separate;
   border:1px solid #222222;
   border-spacing:1px 1px;
   align:center;
   background-color: #000000;
   padding: 1px;
   width:400px;

}
div.topic {
    background-color:#3C0;
    font-family: Tahoma; 
    font-size: 12px;
    height: 23px;
    font-color:#FFF;
    text-align:center;

 }
div.row {
    background-color: #111111;
    border-bottom: 1px solid black;
    color: #ffffff;
    padding:6px; 
    font-family: Tahoma;
    font-size:12px;

}

div.row:Hover {
    background-color: #252525;
}

</style>
<body>


<table class="line">
  <tbody>
    <tr>
      <td class="topic" colspan="3">Table</td>
    </tr>
    <tr class="row">
      <td width="20%" align="left">Test</td>
      <td width="20%" align="center">1</td>
    </tr>
    <tr class="row">
      <td align="left">Test</td>
      <td align="center">2</td>
    </tr>
  </tbody>
</table>
 <p>
 <div class="line">
 <div class="topic">Div</div>
 <div class="row">Test</div><div class="row">1</div>
 <div class="row">Test</div><div class="row">2</div>
 </div>
</p>

Answer 1

很高兴看到您将table转换为div s，但请确保您只在必要时执行此操作。

如果页面上的数据是表格式的，那么将它放在table元素中是有意义的。

Div用于布局和结构，table用于显示表格数据。

我的一个同事曾经花了很多年的时间在一个桌子结构之外的div中建立一个论坛。这都是因为他被告知“桌子不好，使用div和CSS”。重要的是要记住，这只是指布局结构。

如果您的结构包含行和列，请使用表格。表仍然是有用的有用HTML元素，并且远未被弃用。

Answer 2

获得一本好书 - 我推荐 CSS：The Missing Manual（Missing Manuals）
使用float esp display

relative

Answer 3

你走了：

HTML：

<div id="wrap">
    <h2> Div </h2>
    <div class="section">
        <div> Test </div>
        <div> 1 </div>
    </div>
    <div class="section">
        <div> Test </div>
        <div> 2 </div>
    </div>
</div>

CSS：

#wrap {
    border: 2px solid #333;
    padding: 2px;
}

h2 {
    background: green;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 4px 0;
}

.section {
    overflow: auto;
    margin-top: 2px;
}

.section > div {
    float:left;
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #333;
    color: white;
    padding: 4px 0;
}

.section > div + div {
    text-align: center;
    border-left: 2px solid black;
}

现场演示： http://jsfiddle.net/jNQrM/1/

Answer 4

放浮动：左;在这堂课上： div.row

Answer 5

看看css显示属性。

.line {
display: table;
}

.row {
display: table-cell;
}

但是你应该在使用Internet Explorer时遇到一些问题。在那个caase你可以使用display：inline;用缩放：1;

使用div作为表创建相同的东西

5 个答案: