Question

所以我有一张桌子，在我的页面上设置为40％的宽度。 2栏

我希望有一些行有50/50列拆分，有些行有25/75。

这是我目前的完整造型：

table {
    width: 40%;
}

td {
    padding: 7px;
}

td.labelText {
    vertical-align: middle;
    text-align: right;
    padding-right: 10px;
    width: 50%;
}

td.editor {
    padding-left: 7px;
    width: 50%;
}

td.checklabelText {
    vertical-align: middle;
    text-align: right;
    padding-right: 10px;
    width: 75%;
}
td.checkeditor {
    padding-left: 7px;
    width: 25%;
}

每当我使用75/25将<td>标记设置为类时，表中的每一行也会调整大小。我知道我做的事情非常简单，但无法理解它！

感谢任何帮助，谢谢。

Answer 1

表格是如何工作的。

尽管如此，你可以通过colspan取得很多成就。

如果你总是有2 TD个，那么在某些行中你可以拥有

＆＃13;

/* Important */
td {
  width: 25%;
}

/* for demo */
td {
  /*for demo*/
  background: #eeeeaa;
  text-align: center;
}

/* for demo */
table {
  width: 100%;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th colspan="4">Treating the table as 4-column table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">50 (colspan=2)</td>
      <td colspan="2">50 (colspan=2)</td>
    </tr>
    <tr>
      <td colspan="3">75 (colspan=3)</td>
      <td colspan="1">25 (colspan=1)</td>
    </tr>
  </tbody>
</table>

＆＃13;

您也可以只有一个TD colspan设置为您拥有的最大列数，然后在此TD内，您可以拥有一个具有不同单元格宽度的子表

＆＃13;

/* Important */
td.edit-75 {
  width: 75%;
}
/* Important */
td.edit-25 {
  width: 25%;
}


/* for demo */
td {
  background: #eeeeaa;
  text-align: center;
}

/* for demo */
table {
  width: 100%;
}

/* for demo */
td.edit-75, td.edit-25 {
  background: #99cc99;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th colspan="2">Keeping it as 2-column table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td colspan="2">
        Do whatever you want here, ex:
        <table>
          <tbody>
            <td class="edit-75">75</td>
            <td class="edit-25">25</td>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>50</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

＆＃13;

当有一个展开/折叠行时，我经常使用最后一个技巧，当展开时显示非表格数据，如表格左右。

Answer 2

表列始终对齐。您可能需要根据需要创建更多自定义内容。

<table>
    <tr>
        <td><div class="w75">data</div><div class="w25">data</div></td>
        <td><div class="w25">data</div><div class="w75">data</div></td>
        etc. etc.

你可以采取一百万种不同的方法，而这只是一种方法。

希望有所帮助。

HTML表格+列宽

2 个答案: