CSS - 可以用CSS而不是？<table> </table>创建

Question

我正在创建一个基于设计师photoshop模型的网站。

以下是问题表单的一部分。我知道这可以很容易地用HTML表创建，但由于表应该用于数据，我宁愿使用CSS。

如果可以创建3个单独的列，一个用于单选按钮，另一个用于标题，另一个用于文本框，我试图解决，但我不确定如何使这些功能排成一行（“帐户”单选框与“名称”及其文本框对齐）。

这应该用CSS还是表格完成？

Answer 1

您可以使用

{li> display:table; <table> {li> display:table-row; <tr>
• display:table-cell;代表<td> 以div格式

here is a demo（它有css表 vs html表 - 比较你的理解）

CSS 与

一起玩

body{
     height:100%;
}
#main{
    height:100%;
    width:100%;

}
.table{
    display:table;
    width: 100%;
}
.tr{
    display:table-row;
}
.td{
    display:table-cell;
}

修改

根据您的图片，您需要一个类似于 demo

的布局

<强> CSS

body {
    height:100%;
}
#main {
    height:100%;
    width:100%;
}
.table {
    display:table;
    width: 100%;
}
.tr {
    display:table-row;
}
.td {
    display:table-cell;
}
.td > span {
    display:list-item;
    list-style:none;
}
.td3 >span {
    background:grey;
    height:16px;
    font-size:10px;
}

<强> HTML

<div id="main">
    <div class="table">
        <div class="tr">
            <div class="td td1"> <span>Project </span>  <span>Account</span>  <span>General bsns</span> 
            </div>
            <!-- //td -->
            <div class="td td2"> <span>Ref</span>  <span>Tite</span>  <span>Name</span> 
            </div>
            <!-- //td -->
            <div class="td td3"> <span>Insert Project Ref</span>  <span>Insert Project Title</span>  <span>Insert Account Nama</span> 
            </div>
            <!-- //td -->
        </div>
        <!-- //tr -->
    </div>
</div>