1. ホーム
  2. 質問と答え
  3. 常に前の列の下にテーブルを置く

常に前の列の下にテーブルを置く

2016-07-18 3 views
0

私は1つの行に2つのテーブルを持っています - 1つは左にあり、もう1つは右にあります。それは2つ以上のテーブルになる可能性があり、私は常に前の2つのテーブルの次の2つのテーブルを見たいと思います。また、正しい表が時々現れることができないという状況もありえます。 2つのテーブル、または1つだけ（次のテーブルが表示されない場合）次のテーブルが確実に下に置かれるようにするにはどうすればよいですか？常に前の列の下にテーブルを置く

これは現時点のサンプルコードとスクリーンショットです.2番目のテーブルの間に11個のbrを配置してからOKに見えますが、これは良い方法ではありません。特定のしたがって、このアプローチは正しいとは言えません。見てみましょう：このコードは、Visual Basicのコードである私のコードから生成され

Without Br's

With static BR's

：

<br></br> 
<table border="3" cellpadding="10" cellspacing="10" align="left" style="font-size:12pt;width:30%;"> 
    <tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Marke::</td><td width="60%" style="text-align:left;padding-left:20px;">JUSThome 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Serie::</td><td width="60%" style="text-align:left;padding-left:20px;">op 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Nummer::</td><td width="60%" style="text-align:left;padding-left:20px;">10.1018.1 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Farbe::</td><td width="60%" style="text-align:left;padding-left:20px;">Zur auswahl 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material::</td><td width="60%" style="text-align:left;padding-left:20px;">Ekoleder 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material Types::</td><td width="60%" style="text-align:left;padding-left:20px;">Soft 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material Attributes::</td><td width="60%" style="text-align:left;padding-left:20px;">Soft 1 
     </td> 
    </tr> 
</table><table border="3" cellpadding="10" cellspacing="10" align="right" style="font-size:12pt;width:70%;"> 
    <tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Hohe::</td><td width="60%" style="text-align:left;padding-left:20px;">1 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Breite::</td><td width="60%" style="text-align:left;padding-left:20px;">2 
     </td> 
    </tr> 
</table> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 

<table border="3" cellpadding="10" cellspacing="10" align="left" style="font-size:12pt;width:30%;"> 
    <tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Marke::</td><td width="60%" style="text-align:left;padding-left:20px;">JUSThome 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Serie::</td><td width="60%" style="text-align:left;padding-left:20px;">op Farbe: Weiss 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Nummer::</td><td width="60%" style="text-align:left;padding-left:20px;">10.1018.2 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Farbe::</td><td width="60%" style="text-align:left;padding-left:20px;">Weiss 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material::</td><td width="60%" style="text-align:left;padding-left:20px;">Ekoleder 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material Types::</td><td width="60%" style="text-align:left;padding-left:20px;">Soft 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material Attributes::</td><td width="60%" style="text-align:left;padding-left:20px;">Soft 1 
     </td> 
    </tr> 
</table><table border="3" cellpadding="10" cellspacing="10" align="right" style="font-size:12pt;width:70%;"> 
    <tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Hohe::</td><td width="60%" style="text-align:left;padding-left:20px;">1 
     </td> 
    </tr><tr> 
     <td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Breite::</td><td width="60%" style="text-align:left;padding-left:20px;">2 
     </td> 
    </tr> 
</table>

はscreenshootsを参照してください。しかし、あなたのサポートによって、私のコードに新しい属性を追加して、その問題をハンドリングすることができました。

'***************************** FIRST TABLE ***************************** 

      html.AddStyleAttribute("font-size", "12pt") 
      html.AddStyleAttribute(HtmlTextWriterStyle.Width, "30%") 
      'Border 
      html.AddAttribute(HtmlTextWriterAttribute.Border, "3") 
      html.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "10")   'spaces between inner td content 
      html.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "10")   'spaces between td's 
      html.AddAttribute(HtmlTextWriterAttribute.Align, "left") 

      html.RenderBeginTag(HtmlTextWriterTag.Table)      '---------------------------------------------------------------- TABLE 

      For Each item As KeyValuePair(Of String, List(Of String)) In dictionar 
       Dim attribute As String = item.Key 
       Dim attr_values As List(Of String) = item.Value 

       html.RenderBeginTag(HtmlTextWriterTag.Tr)       '----------------------------------------------- TR  (row) 

       'two below statments will do that text in 1st td will be always on left in the corner 
       html.AddStyleAttribute("vertical-align", "top") 
       html.AddStyleAttribute("text-align", "left") 
       'space from left for text 
       html.AddStyleAttribute("padding-left", "20px") 
       'gray background color 
       html.AddAttribute("style", "background-color: #778899") 
       html.AddAttribute("width", "30%") 'wystarczy dla jednej td, dla prawej nie trzeba 
       html.AddStyleAttribute("color", "white") 
       html.RenderBeginTag(HtmlTextWriterTag.Td)       '--------------------------------- TD    (attribute)  
       html.Write(attribute & ":") 
       html.RenderEndTag()             '--------------------------------- /TD    

       'space from left td 
       html.AddAttribute("width", "60%") 'wystarczy dla jednej td, dla prawej nie trzeba 
       html.AddStyleAttribute("text-align", "left") 
       html.AddStyleAttribute("padding-left", "20px") 
       html.RenderBeginTag(HtmlTextWriterTag.Td)       '--------------------------------- TD    (values) 
       For Each sentence In attr_values 
        html.WriteLine(sentence) 
        If attr_values.Count > 1 Then 
         html.RenderBeginTag(HtmlTextWriterTag.Br) 
         html.RenderEndTag() 
        End If 
       Next 
       html.RenderEndTag()             '--------------------------------- /TD 

       html.RenderEndTag()             '---------------------------------------------- /TR 
      Next 

      html.RenderEndTag()              '---------------------------------------------------------------- /TABLE 

      '***************************** FIRST TABLE ***************************** 



      '***************************** SECOND TABLE ***************************** 

      If wymiary.Count > 0 Then 

       html.AddStyleAttribute("font-size", "12pt") 
       html.AddStyleAttribute(HtmlTextWriterStyle.Width, "70%") 
       'Border 
       html.AddAttribute(HtmlTextWriterAttribute.Border, "3") 
       html.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "10")   'spaces between inner td content 
       html.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "10")   'spaces between td's 
       html.AddAttribute(HtmlTextWriterAttribute.Align, "right") 
       html.RenderBeginTag(HtmlTextWriterTag.Table)      '---------------------------------------------------------------- TABLE 

       For Each item As KeyValuePair(Of String, List(Of String)) In wymiary 
        Dim attribute As String = item.Key 
        Dim attr_values As List(Of String) = item.Value 

        html.RenderBeginTag(HtmlTextWriterTag.Tr)       '----------------------------------------------- TR  (row) 

        'two below statments will do that text in 1st td will be always on left in the corner 
        html.AddStyleAttribute("vertical-align", "top") 
        html.AddStyleAttribute("text-align", "left") 
        'space from left for text 
        html.AddStyleAttribute("padding-left", "20px") 
        'gray background color 
        html.AddAttribute("style", "background-color: #778899") 
        html.AddAttribute("width", "30%") 
        html.AddStyleAttribute("color", "white") 
        html.RenderBeginTag(HtmlTextWriterTag.Td)       '--------------------------------- TD    (attribute)  
        html.Write(attribute & ":") 
        html.RenderEndTag() 
        '--------------------------------- /TD    

        'space from left td 
        html.AddAttribute("width", "60%") 
        html.AddStyleAttribute("text-align", "left") 
        html.AddStyleAttribute("padding-left", "20px") 
        html.RenderBeginTag(HtmlTextWriterTag.Td)       '--------------------------------- TD    (values) 
        For Each sentence In attr_values 
         html.WriteLine(sentence) 
         If attr_values.Count > 1 Then 
          html.RenderBeginTag(HtmlTextWriterTag.Br) 
          html.RenderEndTag() 
         End If 
        Next 
        html.RenderEndTag()             '--------------------------------- /TD 

        html.RenderEndTag()             '---------------------------------------------- /TR 

       Next 

       html.RenderEndTag()              '---------------------------------------------------------------- /TABLE 
      End If            '---------------------------------------------------------------- /TABLE 

      '***************************** SECOND TABLE *****************************

出典

2016-07-18 Anonymous

+0

http://getbootstrap.com/css/#gridにアクセスし、グリッドシステムを確認してください。それはあなたが望むものを与えるはずです。また、あなたはHTMLで間違っている。テーブル属性は使用せず、代わりにCSSスタイルを使用し、DRYを使用してください。 –

+0

@Stephan Zeng hi Stephan - これは外部プログラムからいくつかのWebページに配置されるので、このようにしなければなりません。私は私のやり方でそれをやろうとしています。手伝ってくれますか？ –

+0

このようなものが必要ですか？https://jsfiddle.net/6hv7u9Ls/ ?? –

答えて

0

CSSを使用してテーブルを作成してみると、スタイルを簡単に作成できます。

あなたがフロート使用することができます

：お互いの隣に2つのテーブルを配置する左/右（あなたががテーブルの幅を設定する必要があります）

例：

HTML：

<div id="table-left"> 
    <div class="table-row"> 
    <div class="table-cell"> 
     Table cell content 
    </div> 
    </div> 
</div> 
<div id="table-right"> 
    <div class="table-row"> 
    <div class="table-cell"> 
     Table cell content 
    </div> 
</div>
を

CSS：

#table-left { 
    display: table; 
    width: 49%; /*Change width of table if you want*/ 
    height: auto; 
    float: left; 
} 
#table-right { 
    display: table; 
    width: 49%; /*Change width of table if you want*/ 
    height: auto; 
    float: right; 
} 
.table-row { 
    display: table-row; 
    width: 100%; 
} 
.table-cell { 
    display: table-cell; 
    width: 100px; /*Change width of table cell if you want*/ 
}

不規則なHTML表のマークアップを使用する代わりに、幅を変更したり、CSSの背景色やパディングなどの他のスタイルを追加することができます。 'table-row' div内に別のtable-cell divを配置することで、さらにテーブルセルを追加することもできます。

出典

2016-07-18 09:36:20

+0

あなたの入力に感謝します。このコードは外部アプリケーションで作成されているので、私は外部のCSSファイルを使用することはできません。たぶんhtmlではないかもしれませんが、私のプログラムからhtmlの属性などを特定するにはどうすればよいかを知ることができます。メインポストを見る –

関連する問題

 関連する問題