CSS - 可以使用CSS而不是< table&gt ;?创建 [英] CSS - Could this be created with CSS rather than <table>?

问题描述

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

I am creating a website based on a designers photoshop mock-ups.

这是问题表单的一部分。我知道这可以用一个HTML表创建相当容易，但因为表应该用于数据，我宁愿使用CSS。

Here is a part of a question form. I know this could be created with a HTML table fairly easily, but as tables are supposed to be used for data, I would rather use CSS.

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

I am trying to work out if this could be created with 3 separate columns, one for the radio buttons, another for the titles, and the other for the text boxes, but I am unsure how to get the features to line up ("Account" radio box to line up with "Name" and its text box).

是否应该使用CSS或表格完成？

Should this be done with CSS or table?

推荐答案

可以使用

• display：table; table>


• display：table-row; for < tr& c> c> c> code>
div格式



• display:table; for <table>
• display:table-row; for <tr>
• display:table-cell; for <td> in div format

这是一个演示 （它有css表 vs html表格比较， >）

here is a demo (it has css table vs html table-compare for your understanding)

CSS 可与

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

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

编辑

根据您的图片，您需要一个像这样的布局 演示

Based on your image, you will need a layout something like this demo

CSS

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>

这篇关于CSS - 可以使用CSS而不是< table&gt ;?创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！