versuchen, ohne Display Tisch machen Tabelle mit div

-2

Ich versuche Tabellen-Tag ohne Tabelle zu erstellen und mit div hier ich diesen Stil Methode für Top Kopf untenversuchen, ohne Display Tisch machen Tabelle mit div

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

andere ist dies für dynamische gezeigt verwendet Inhalt

.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;}

und die HTML-unterhalb

gezeigt

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

Wie kann ich die Tabelle erstellen, ohne über das Display: Tabelle basic 'margin' und 'padding', 'float'

Hier ist das Bild unter Verwendung von: -

Check this

Hier wird der Code unter der CSS geändert

.table { 
    width: 100%; 
} 

.header { 

} 

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

.productBody { 
    margin-top: 10px; 
} 

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

und für HTML auch: -

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

Quelle

2017-03-08 Rinki Panwar

* die Tabelle erstellen, ohne über das Display: Tabelle * - Aber warum? In der Tat scheint dies wie Tabellendaten, warum nicht nur eine normale 'Tabelle' verwenden? – Abhitalks

Tut mir leid, mein Klient braucht es so ohne Tabelle –

Dann liegt es in Ihrer Verantwortung (* als Entwickler und IT-Profi *), Ihren Kunden über die Absurdität dieser Anforderung aufzuklären. Informieren Sie den Kunden darüber, wie er Semantik bricht und nicht richtig ist. – Abhitalks

Sie können in der folgenden Art und Weise versuchen, eine Tabelle auf DIVs basieren.

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

Quelle

2017-03-08 07:34:23

ja es funktioniert, aber eine leere Spalte stört das Design, wie das Problem in dynamischen beheben –

Bitte, ein Bild, so dass ich Ihnen helfen kann. –

Ich habe das Bild bitte helft mir in dieser Ausgabe –

versuchen, ohne Display Tisch machen Tabelle mit div

Antwort

Verwandte Themen