レスポンス値付きテーブルロジックブートストラップ/ html

Question

ブートストラップロジックはよく静かですがわかりません。コードを列挙すると、12個のユニットを持つテーブル応答クラスを定義しました。テーブルi内の各セルについて、サイズを定義して使用しました。

だから、基本的な考え方は、これを取得することです：

0 
1 2 3 

ブートストラップが私に返ししかし、この：

値ということですなぜそれが値0とセルのパラメータを取る場合1

_0_ 
_1_2 3 

、私が定義したセルnr.1は、ユニットサイズを1つしか持てません。私にお知らせください。ありがとうございました。

<div class="table-responsive col-xs-12"> 
    <table class="table"> 

     <tbody> 

      <tr> 
       <td class="col-xs-3" style="text-align:center;">0</td> 
      </tr> 

      <tr> 
       <td class="col-xs-1" style="text-align:center;">1</td> 
       <td class="col-xs-1" style="text-align:center;">2</td> 
       <td class="col-xs-1" style="text-align:center;">3</td> 
      </tr> 

     </tbody> 

    </table> 
</div> 

Answer 1

<div class="table-responsive col-xs-12"> 
    <table class="table"> 

     <tbody> 

      <tr> 
       <td class="col-xs-3" colspan="3" style="text-align:center;">0</td> 
      </tr> 

      <tr> 
       <td class="col-xs-1" style="text-align:center;">1</td> 
       <td class="col-xs-1" style="text-align:center;">2</td> 
       <td class="col-xs-1" style="text-align:center;">3</td> 
      </tr> 

     </tbody> 

    </table> 
</div> 

Answer 2

あなたは、このようなあなたの最初の行を変更する必要があります。各行の列構造が同じであるため、このエラーが発生しています。ここで

<tr> 
    <td></td> 
    <td class="col-xs-1" style="text-align:center;">0</td> 
</tr> 

がpenで、以下の実施例である：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="table-responsive col-xs-12"> 
 
    <table class="table"> 
 

 
     <tbody> 
 

 
      <tr> 
 
       <td></td> 
 
       <td class="col-xs-1 col-offset-3" style="text-align:center;">0</td> 
 
      </tr> 
 

 
      <tr> 
 
       <td class="col-xs-1" style="text-align:center;">1</td> 
 
       <td class="col-xs-1" style="text-align:center;">2</td> 
 
       <td class="col-xs-1" style="text-align:center;">3</td> 
 
      </tr> 
 

 
     </tbody> 
 

 
    </table> 
 
</div>

Answer 3

これを行うための簡単な方法がありますが、私はあなたのコードをコピーして追加していますdisplay:inline-block〜td要素スニペットで試してください

table tr { 
 
    text-align:center; 
 
} 
 
table tr td { 
 
    display:inline-block !important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="table-responsive col-xs-12"> 
 
    <table class="table"> 
 

 
     <tbody> 
 

 
      <tr> 
 
       <td class="col-xs-1" style="text-align:center;">0</td> 
 
      </tr> 
 

 
      <tr> 
 
       <td class="col-xs-1" style="text-align:center;">1</td> 
 
       <td class="col-xs-1" style="text-align:center;">2</td> 
 
       <td class="col-xs-1" style="text-align:center;">3</td> 
 
      </tr> 
 

 
     </tbody> 
 

 
    </table> 
 
</div>