0

ブートストラップを使用してモバイル フレンドリーにする Web アプリがあります。3 つのアイテムを視覚的にグループ化するために、これら 3 つのアイテムが表示されるテーブル セルの周りにボックス/境界線を配置するクラスを作成しました。(3項目はlink4、5、5)

クラスは次のとおりです。

 td.lights
 {
   border: 2px solid black;
 }

問題のある HTML は次のとおりです。デモ用に、最小限のコードにまとめました。私が気付いたのは、(Firefox のレスポンシブ デザイン ビュー ツールを使用して) モバイル デバイスをシミュレートすると、

      <table>
          <tbody>
                  <tr>  

                  <td>link1</td>        
                  <td>link2</td>    
                  <td>link3</td>    
                  <td>&nbsp;</td>
                  <td class="lights">link4&nbsp;/&nbsp;link5&nbsp;/&nbsp;link6</td>

              </p>
          </tbody>
          </table>

このテーブルの直後に、別のテーブルを作成するための次のコードがあります。

         <P>
            <table class="table table-bordered table-striped">
            <thead>
                                etc...
                            </thead>
                            </table>

ブラウザーのサイズを変更すると、ブラウザーのサイズがどれだけ小さくなるかに応じて、テーブル 1 の下部の境界線が切り取られます。他のフィールドは問題ないように見えますが、周囲に境界線がありません。私には、テキスト (「link4 / link5 / link6」) の上下に一定のスペースがあり、動的に変化していないように見えます。次のように、高さ「動的」高さプロパティを td に追加しようとしました。

 td.lights
 {
   border: 2px solid black;
   height: 1em;
 }

しかし、それは私の問題を解決しませんでした。
助言がありますか？よろしくお願いします！

4

1 に答える 1

0

私が知る限り、あなたのマークアップにはかなりの数のエラーがあります:

</p>

次のようにする必要があります。

</tr>

また、次のものが必要です。

<P>

2 番目のテーブルの前ですか？テーブルを P タグでラップすることは避けます。不要なパディングが追加され、セマンティックの観点からは意味がありません。

最初にそれらを修正して、何が起こるか見てください。次に、テーブルを扱うときは、次を使用することをお勧めします。

<table cellpadding="0" cellspacing="0" border="0">

次のように CSS でこれを行うこともできます。

table, tr, td { margin: 0; padding: 0; border: 0; }

これにより、セル内およびセルの周囲に不要なパディングがないようにする必要があります。

于 2012-09-11T13:42:33.297 に答える