保持html表格中的复选框

Question

考虑一个简单的居中对齐表，带有一些复选框

单击按钮将自动选中一些复选框，并在复选框旁边添加一些动态文本。现在复选框不再对齐，表格看起来很奇怪。

$('#add').click(function () {
    $('#bike').attr('checked','checked').after("<span>Good Selection</span>");
    $('#airplean').attr('checked','checked').after("<span>Woow</span>");

});

http://jsfiddle.net/m9884jy7/1/

在普通的HTML中，可以通过添加额外的列来修复它....

但请注意我已经简化了样本，我无法添加列：（

我正在寻找css解决方案，或者可能是一个可以使用的提示。另外，由于我有复选框的ID，我可以添加任何可以帮助纠正对齐的html DOM。

Answer 1

好了投入一些想法后我想出了一个解决方案，基本上你有一个相对位置的包装器然后跨度会得到绝对定位..实际上很简单，这里是代码：{{3} }

＆＃13;

＆＃13;

$('#add').click(function() {
  $('#bike').attr('checked', 'checked').after("<span>Good Selection</span>");
  $('#airplean').attr('checked', 'checked').after("<span>Woow</span>");
});

＆＃13;

table,
td {
  text-align: center
}
td > div {
  position: relative;
}
td > div > span {
  position: absolute;
  text-align: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>
      <div>
        <input type="checkbox" id='bike'>
      </div>
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>
      <div>
        <input type="checkbox" id="car">
      </div>
    </td>
  </tr>
  <tr>
    <td>Bill</td>
    <td>
      <div>
        <input type="checkbox" id="airplean">
      </div>
    </td>
  </tr>
</table>
<button type="button" id="add">Select Some</button>

＆＃13;

＆＃13;

＆＃13;

它很灵活，但唯一的缺点是如果文本长度大于容器，可能会发生自动换行