私はテーブルタグなしでテーブルを作成しようとdiv要素を使用しています

-2

は、ここで私は私はテーブルタグなしでテーブルを作成しようとdiv要素を使用しています

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

別の下に示すトップヘッドのこのスタイルのメソッドを使用する表示テーブルなしのdivを使用してテーブルを作成しようとしている、これはダイナミックです

.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コンテンツは

以下に示します。

Check this - ：ここでは、以下の画像は、テーブルの基本的な「余白」と「パディング」を使用して、「フロート」

：どのように私は、ディスプレイを使用せずにテーブルを作成することができます

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

ここで

は
CSSの下に変更したコードです
とも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">   @Model.rowNumber </div> <div class="col1">   @item.ProductName </div> <div class="col1">   @item.StoreName </div> <div class="col1">   @item.CompanyName </div> <div class="col1">   @item.desc </div> <div class="col1">   @item.amt </div> <div class="col1">   <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

あなたは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>

出典

2017-03-08 07:34:23

はいそれは動作しますが、ブランクの列がデザインに混乱を与えます。その問題をダイナミックで解決するには –

私がお手伝いできるように画像を投稿してください。 –

私はこの問題で私を助けてください画像を掲載しました –

私はテーブルタグなしでテーブルを作成しようとdiv要素を使用しています

答えて

関連する問題