Css 使用带有tabel单元格和行的div标记

我只想在HTML中使用div设计上面的图像，我已经尝试了以下代码：

这个css部分

<style type="text/css">

    .divTable
    {

        border-color: Gray;
        border: 1px;
        border-spacing: 0.5px;
        border-style: solid;
        display: table;
        display: block;
        width: 100%;
        padding: 2px 1px 0px 1px;
         background-color: #CCCCCC;
    }
    .divRow
    {
      display: table-row;
      border-color: White;
        border: 1px;
        border-spacing: 0.5px;

        padding: 2px 2px 2px 2px;
    }
        .divCell
        {
          display: table-cell;
             float: left;
            border-color: White;
        border: 2px;
        padding: 2px 2px 2px 2px;


    }
</style>

.divTable
{
边框颜色：灰色；
边界：1px；
边界间距：0.5px；
边框样式：实心；
显示：表格；
显示：块；
宽度：100%；
填充：2px 1px 0px 1px；
背景色：#中交；
}
迪夫罗先生
{
显示：表格行；
边框颜色：白色；
边界：1px；
边界间距：0.5px；
填充：2×2×2×2×2×2；
}
divCell先生
{
显示：表格单元格；
浮动：左；
边框颜色：白色；
边界：2px；
填充：2×2×2×2×2×2；
}

这是html部分

    <div class="divTable">
    <div class="divRow">
        <div class="divCell">
            <span>
                <label id="lblId">
                    ID</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label1">
                    Name</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label2">
                    Age</label></span>
        </div>
        <div class="divCell" >
            <span>
                <label id="Label3" >
                    Date Of Birth</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label4">
                    Gender</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label5" >
                    </label></span>
        </div>
        <div class="divCell"">
            <span>
                <label id="Label6">
                    Username</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label7">
                    Credential</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label8">
                    Company Name</label></span>
        </div>
    </div>
    <div class="divRow">

    </div>
    <div class="divRow">

    </div>
    <div class="divRow">

    </div>
</div>

身份证件
名称
年龄
出生日期
性别
移除
显示：块在
.divTable
中。您只需
显示：表格

同样在
.divCell
中，您可以将
浮动：左
更改为
文本对齐：左
通过应用
display:block
删除
display:block
可以覆盖
display:table
，但当您最小化页面设计的最大化时，页面设计将保持不变


带有div的新fiddle链接

试试这段代码。。我做了一些修改

HTML


身份证件
名称
年龄
出生日期
性别
_
用户名
资质
公司名称
主题1
主题2
主题1
主题2
0000
1111
2222
-----
3333
4444
5555
6666
7777
8888
9999

CSS


.divTable
{
边框颜色：灰色；
边界：1px#fff；
边界间距：0.5px；
边框样式：实心；
位置：绝对位置；
左：0；
显示：表格；
宽度：100%；
填充：2px 1px 0px 1px；
背景色：#中交；
}
迪夫罗先生
{
显示：表格行；
边框：1px实心#fff；
宽度：100%；
位置：相对位置；
背景：#ffcc00
}
为什么不改为使用表格？它实际上看起来像一张桌子@晶莹宫的要求是只做div标签没有表PLZZZZZZZZhelp@jing：这不是一张真正的桌子，我个人认为这是一张
，它只是看起来像一张
；所以我同意在这种情况下不应该使用表格。为什么只使用div？设计和结构适合表格？我想在最小化和最大化屏幕时调整这个div。它应该保持不变。我们如何实现这一点…显示块在整个页面上展开，表格根据单元格进行EXPAN感谢您的回复，我将此im添加到ITI，但它的结构会随着屏幕大小的变化而变化：（@shweta您想要什么屏幕大小？当我更改所有div get的大小结构时，它将在最大化屏幕bt上正常显示displace@shweta如果您使用div，那么您应该非常清楚div的大小。无法更改大小以获得与所需相同的结构您还可以使用引导来正确格式化contentsh谢谢你的回复，但我想用div。请帮我解决这个Hello@shweta请这个我用div格式更新的新JSFIDLE链接，我在你的html结构中发现一个错误，那就是小报价错误
<div class="divTable">
        <div class="divRow">
            <div style="width:10%; line-height:25px; float:left; border-left:2px solid #fff">
            ID
            </div>

            <div style="width:10%; line-height:25px; float:left; border-right:2px solid #fff">
            Name
            </div>

            <div style="width:10%; line-height:25px; float:left; border-right:2px solid #fff">
            Age
            </div>

            <div style="width:10%; line-height:25px; float:left; border-right:2px solid #fff">
            Date of Birth
            </div>

            <div style="width:10%; line-height:25px; float:left; border-right:2px solid #fff">
            Gender
            </div>

            <div style="width:15%; line-height:25px; float:left; border-right:2px solid #fff">
            _
            </div>

            <div style="width:11%; line-height:25px; float:left; border-right:2px solid #fff">
            Username
            </div>

            <div style="width:11%; line-height:25px; float:left; border-right:2px solid #fff">
            Credential
            </div>

            <div style="width:11%; line-height:25px; float:left;">
            Company Name
            </div>
        </div>

        <div class="divRow">
            <div style="line-height:25px; float:left; width:50%; border:2px solid #fff; border-right:none">
            Subject1
            </div>

            <div style="line-height:25px; float:left; width:49%; border:2px solid #fff;">
            Subject2
            </div>
        </div>

          <div class="divRow">
            <div style="line-height:25px; float:left; width:50%; border:2px solid #fff; border-top:none; border-right:none">
            Subject1
            </div>

            <div style="line-height:25px; float:left; width:49%; border:2px solid #fff; border-top:none">
            Subject2
            </div>
        </div>

        <div class="divRow">
            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff; border-left:2px solid #fff">
            0000
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            1111
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            2222
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            -----
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            3333
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            4444
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            5555
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            6666
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            7777
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            8888
            </div>

             <div style="width:8%; line-height:25px; float:left;">
            9999
            </div>
        </div>
</div>

<style>
.divTable
    {

        border-color: Gray;
        border: 1px #fff;
        border-spacing: 0.5px;
        border-style: solid;
        position:absolute;
        left:0;
        display: table;
        width: 100%;
        padding: 2px 1px 0px 1px;
         background-color: #CCCCCC;
    }
    .divRow
    {
      display: table-row;
      border:1px solid #fff;
      width:100%;
      position:relative;
      background:#ffcc00
    }

</style>