Question

我正在尝试创建没有表格标签的表格并在这里使用div我使用这种样式方法用于下面显示的顶部

.fixtable {   
              width: 12%;
              background-color: darkgray;
              float: left;
              border-bottom: none;
              display: inline-block;
              margin: 1px 0px 0px 0px;
          }

另一个是动态内容

.fltLft{float:left;}
.fltRgt{float:right;}
.dvWd5Per{width:5%;margin:0px;padding:0px;}
.dvWd10Per{width:10%;margin:0px;padding:0px;}
.dvWd15Per{width:15%;margin:0px;padding:0px;}
.dvWd25Per{width:25%;margin:0px;padding:0px;}
.padCellPx{padding:5px;}

，html如下所示

     <div>
        <div class="fixtable">Sr.No.</div>
        <div class="fixtable">Product Name</div>
        <div class="fixtable">Update/Delete</div>
    </div>
    <div>
        @foreach (var item in Model.objlst)
        {
            Model.rowNumber++;
            <div>
                <div class="fltLft dvWd5Per">
                    <div class="padCellPx">
                        @Model.rowNumber
                    </div>
                </div>
                <div class="fltLft dvWd5Per">
                    <div class="padCellPx">
                        @item.ProductName
                    </div>
                </div>
                <div class="fltLft dvWd5Per">
                    <div class="padCellPx">
                        <button type="button">
                            <font style="color:#000;">View</font>
                        </button>
                    </div>
                </div>
            </div>
        }

如何在不使用display：table的情况下创建表格，使用基本的'margin'和'padding'，'float'

以下是图片： -

Check this

以下是CSS

下面更改的代码

.table {
    width: 100%;
}

.header {

}

.table, .header, .row {
    width: 100%;
}

.productBody {
    margin-top: 10px;
}

.col {
    width: 12%;
    float: left;
}
.col1 {
    width: 12%;
    float: left;
}

和HTML也是： -

<div class="table">
<div class="row header">
    <div class="col">Sr.No.</div>
    <div class="col">Product Name</div>
    <div class="col">Store Name</div>
    <div class="col">Company Name</div>
    <div class="col">Description</div>
    <div class="col">Quantity</div>
    <div class="col">Gross Amount</div>
    <div class="col">Update/Delete</div>
</div>
<div>
    @foreach (var item in Model.objlst)
    {
        Model.rowNumber++;
        <div class="row productBody">
            <div class="row">
                <div class="col1">
                    &nbsp;
                    @Model.rowNumber
                </div>
                <div class="col1">
                    &nbsp;
                    @item.ProductName
                </div>
                <div class="col1">
                    &nbsp;
                    @item.StoreName
                </div>
                <div class="col1">
                    &nbsp;
                    @item.CompanyName
                </div>
                <div class="col1">
                    &nbsp;
                    @item.desc
                </div>
                <div class="col1">
                    &nbsp;
                    @item.amt
                </div>
                <div class="col1">
                    &nbsp;
                    <button type="button" class="btn viewButton" onclick="openAddressCont1(@Model.rowNumber)">
                        <font style="color:#000;">View</font>
                    </button>
                </div>
            </div>
        </div>    
    }       
</div>

Answer 1

您可以尝试以下方式制作基于DIV的表格。

<html>
<head>
    <style>
        .table {
            width: 100%;
        }

        .header {
            background: red;
        }

        .table, .header, .row {
            width: 100%;
        }

        .col {
            width: 33.3333333%;
            float: left;
        }

    </style>
    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="table">
        <div class="row header">
            <div class="col">
                Row Number
            </div>
            <div class="col">
                Product Name
            </div>
            <div class="col">
                dasd
            </div>
        </div>
        <div>
            <div class="row productBody">
                <div class="row">
                    <div class="col">
                        Row #1
                    </div>
                    <div class="col">
                        Product A
                    </div>
                    <div class="col">
                        <input type="button" value="View"/>
                    </div>
                <div>
                <div class="row">
                    <div class="col">
                        Row #2
                    </div>
                    <div class="col">
                        Product B
                    </div>
                    <div class="col">
                        <input type="button" value="View"/>
                    </div>
                <div>
            </div>
        </div>
    </div>
</body>

试图使用没有显示表的div制作表

1 个答案: