bootstrapでtableにチェックボックスを並べるといびつな並び方になる

bootstrapでtableにチェックボックスを並べるといびつな並び方になり対処方法が分からず悩んでいます。
中央寄せのような状態になります。
もちろん、tdに対してtext-align:left;をして左寄せを試みましたが、うまくいきません。
どのように対処すればいいのか教えてください。

<div id="sec5">
  <div class="table-responsive">
    <table class="table master" id="table_sec5">
      <tbody>
        <tr>
          <th>test</th>
          <td><label for="cloth_cover_01"><input type="checkbox" name="cloth_cover[01]" id="cloth_cover_01" value="test_co1" />test_co1</label><label for="cloth_cover_02"><input type="checkbox" name="cloth_cover[02]" id="cloth_cover_02" value="test_co2" />test_co2</label><label for="cloth_cover_03"><input type="checkbox" name="cloth_cover[03]" id="cloth_cover_03" value="test_co3" />test_co3</label>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

gin

2016/10/29 06:51

特に中央寄せになってないですが、thの「test」とチェックボックスの間が空いているということですか？

hidepon

2016/10/29 07:03

チェックボックスの数が増えると左に寄ってくるような感じです。ちょっと理解しがたい状況で困っています。

行動規範の内容に同意します

回答1件

ベストアンサー

ざっくりいうと、thとtdの幅の比率は「thの内容物(test):tdの内容物((チェックボックス+テキスト)*3)」となってます。
なのでtdの中身が多くなるとtdの幅比率が大きくなり左に寄ってくるような感じに見えますね。
それぞれの幅を固定してやるといいと思います。
一例として、こんな感じで。

html
1<div id="sec5">
2  <div class="table-responsive">
3    <table class="table master" id="table_sec5">
4      <tbody>
5        <tr>
6          <th class="col-xs-2">test</th>
7          <td class="col-xs-10"><label for="cloth_cover_01"><input type="checkbox" name="cloth_cover[01]" id="cloth_cover_01" value="test_co1" />test_co1</label><label for="cloth_cover_02"><input type="checkbox" name="cloth_cover[02]" id="cloth_cover_02" value="test_co2" />test_co2</label><label for="cloth_cover_03"><input type="checkbox" name="cloth_cover[03]" id="cloth_cover_03" value="test_co3" />test_co3</label></td>
8        </tr>
9      </tbody>
10    </table>
11  </div>
12</div>