試圖使採用div表沒有顯示錶

-2

我想不用table標籤來創建表，並採用div這裏我用下面試圖使採用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> 
     }

如何可以創建該表不使用顯示：表使用基本「餘量」和「填充」，「浮動」

這裏是圖像下面： -

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>

來源

2017-03-08 Rinki Panwar

*創建表，而不使用顯示：表* - 但爲什麼呢？事實上，這似乎是表格數據，爲什麼不只是使用一個普通的'表'？ – Abhitalks

對不起，我的客戶需要這種方式沒有表 –

然後這是你的責任（*作爲開發人員和IT專業*）教育你的客戶荒謬的這一要求。教客戶關於它打破語義的方式，並且是不正確的。 – Abhitalks

您可以通過以下方式使基於資料覈實表試試。

<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>

來源

2017-03-08 07:34:23

是的它的工作原理，但空白列擾亂設計如何解決動態的問題 –

請發佈圖像，以便我可以幫助你。 –

我已經發布圖片請幫我解決這個問題 –

試圖使採用div表沒有顯示錶

回答

相關問題