将多个单元格项目对齐到表格中的多个行

Question

我有以下内容。

它或多或少在伪

中表示

<table>
    <tr>
        <td>Depart Base</td>
        <td>*time box*</td>
        <td>*time box*</td>
    </tr>
    <tr>
        <td>Mode of Transport</td>
        <td>
            <input type='checkbox'>
            <label>Dedicated ambulance</label>
            <input type='checkbox'>
            <label>AIR</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type='checkbox'>
            <label>Other ambulance</label>
            <input type='checkbox'>
            <label>Taxi</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type='checkbox'>
            <label>RRV</label>
            <input type='checkbox'>
            <label>Other</label>
        </td>
        <td></td>
    </tr>
</table>

但是你可以看到单选按钮没有对齐。

这也是由内部形式创建者（不会改变）

完成的

如何在单元格中放置或对齐项目？

Answer 1

标准建议是不要使用表格进行布局。将它们用于表格数据。但如果您使用该代码块，则可以使用此CSS：

label:nth-of-type(1) {
  width: 150px;
  display: inline-block
}

<table>
  <tr>
    <td>Depart Base</td>
    <td>*time box*</td>
    <td>*time box*</td>
  </tr>
  <tr>
    <td>Mode of Transport</td>
    <td>
      <input type='checkbox'>
      <label>Dedicated ambulance</label>
      <input type='checkbox'>
      <label>AIR</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox'>
      <label>Other ambulance</label>
      <input type='checkbox'>
      <label>Taxi</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox'>
      <label>RRV</label>
      <input type='checkbox'>
      <label>Other</label>
    </td>
    <td></td>
  </tr>
</table>

Answer 2

如果你不能改变标记，那么你唯一的机会就是给每个单元格中的第一个标签一个“足够大”的宽度，如下所示：

td label:nth-of-type(1) { display:inline-block; width:9.5em; }

http://jsfiddle.net/ao2rqtnc/1/

宽度9.5em似乎即将起作用（使用默认字体），但根据此因素和其他因素，可能需要更多。

Answer 3

您可以将标签设为inline-block元素并为其指定宽度：

＆＃13;

＆＃13;

label {
  display: inline-block;
  width: 10em;
  /*or width of your largest label*/
}

＆＃13;

<table>
  <tr>
    <td>Depart Base</td>
    <td>*time box*</td>
    <td>*time box*</td>
  </tr>
  <tr>
    <td>Mode of Transport</td>
    <td>
      <input type='checkbox'>
      <label>Dedicated ambulance</label>
      <input type='checkbox'>
      <label>AIR</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox'>
      <label>Other ambulance</label>
      <input type='checkbox'>
      <label>Taxi</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox'>
      <label>RRV</label>
      <input type='checkbox'>
      <label>Other</label>
    </td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这假设您的标记无法更改，并且您将始终拥有两个带有两个标签的复选框。

这会将单元格填充到最大宽度，如果你的桌子更宽，它看起来会更好看：

table td input {
  width: 5%;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  vertical-align: middle;
}
table td label {
  width: 40%;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
}

<table>
  <tr>
    <td>Depart Base</td>
    <td>*time box*</td>
    <td>*time box*</td>
  </tr>
  <tr>
    <td>Mode of Transport</td>
    <td>
      <input type='checkbox' />
      <label>Dedicated ambulance</label>
      <input type='checkbox' />
      <label>AIR</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox' />
      <label>Other ambulance</label>
      <input type='checkbox' />
      <label>Taxi</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox' />
      <label>RRV</label>
      <input type='checkbox' />
      <label>Other</label>
    </td>
    <td></td>
  </tr>
</table>