不同行的html表格单元格宽度[重复]答案

【问题标题】：html table cell width for different rows [duplicate]不同行的html表格单元格宽度[重复]
【发布时间】：2014-11-17 01:56:46
【问题描述】：

可能重复：
table cell width issue

我有一张桌子设置为

<html>
 <body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <tr>
        <td width="25%">25</td>
        <td width="50%">50</td>
        <td width="25%">25</td>
    </tr>
    <tr>
        <td width="50%">50</td>
        <td width="30%">30</td>
        <td width="20%">20</td>
    </tr>
</table>
</body>
</html>

如何让 2 行具有不同的单元格宽度？

【问题讨论】：

rowspan 如果您希望 1 行为 2 行宽。
双发stackoverflow.com/questions/5937774/table-cell-width-issue
好吧，假设您添加了一个新行，然后给该行 rowspan="2" 它将是单行宽度的两倍，如果您将其设为 3，它将是大小的三倍。但我认为谷歌搜索它可能比我的解释更有效
@Mythje 我认为你混淆了 rowspan 和 colspan :)
@roryf Ow lol 是的，很好指出这一点，谢谢^^我的错

标签： html css

【解决方案1】：

一种解决方案是将您的表格分成 20 列，每列宽度为 5%，然后在每个实际列上使用 colspan 以获得所需的宽度，如下所示：

<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <colgroup>
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
    </colgroup>
    <tr>
        <td colspan=5>25</td>
        <td colspan=10>50</td>
        <td colspan=5>25</td>
    </tr>
    <tr>
        <td colspan=10>50</td>
        <td colspan=6>30</td>
        <td colspan=4>20</td>
    </tr>
</table>
</body>
</html>

JSFIDDLE

【讨论】：

你说得对，我应该使用 colgroup。我会用这个更新答案，谢谢。我之所以使用 20 列是因为我想象他可能需要另一种列配置，而不仅仅是他现在使用的 25-50-25 和 50-30-20，而且我发现 20 列的示例更容易理解，虽然确实更混乱。
IMO 这是一个非常丑陋的解决方案。
25-50-25 列如何反映 25% 50% 和 25%？两个 25% 的 td 大小相同，如果不大于 50%。这不是解决办法吗？

【解决方案2】：

据我所知，这是不可能的，这是有道理的，因为您尝试做的是反对表格数据表示的想法。但是，您可以将数据放在多个表中，并删除它们之间的任何填充和边距，以达到相同的结果，至少是可见的。大致如下：

<html>

<head>
  <style type="text/css">
    .mytable {
      border-collapse: collapse;
      width: 100%;
      background-color: white;
    }
    .mytable-head {
      border: 1px solid black;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-head td {
      border: 1px solid black;
    }
    .mytable-body {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-body td {
      border: 1px solid black;
      border-top: 0;
    }
    .mytable-footer {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }
    .mytable-footer td {
      border: 1px solid black;
      border-top: 0;
    }
  </style>
</head>

<body>
  <table class="mytable mytable-head">
    <tr>
      <td width="25%">25</td>
      <td width="50%">50</td>
      <td width="25%">25</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="50%">50</td>
      <td width="30%">30</td>
      <td width="20%">20</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="16%">16</td>
      <td width="68%">68</td>
      <td width="16%">16</td>
    </tr>
  </table>
  <table class="mytable mytable-footer">
    <tr>
      <td width="20%">20</td>
      <td width="30%">30</td>
      <td width="50%">50</td>
    </tr>
  </table>
</body>

</html>

JSFIDDLE

我不知道您的要求，但我确信有更优雅的解决方案。

【讨论】：

这是唯一可行的解决方案，也是一种合理（最少 hacky）的方法

【解决方案3】：

您不能拥有任意不同宽度的单元格，这通常是来自任何空间的表格的标准行为，例如Excel，否则它不再是一个表格，而只是一个文本列表。

但是，您可以让单元格跨越多个列，例如：

<table>
    <tr>
        <td>25</td>
        <td>50</td>
        <td>25</td>
    </tr>
    <tr>
        <td colspan="2">75</td>
        <td>20</td>
    </tr>
</table>

顺便说一句，您应该避免使用像 border 和 bgcolor 这样的样式属性，而更喜欢 CSS。

【讨论】：

我正在编写 html 电子邮件，因此我更喜欢使用内联样式
@user544079 啊，更有意义。

【解决方案4】：

有 5 列和 colspan，这是可能的 (click here)（但对我来说没有多大意义）：

<table width="100%" border="1" bgcolor="#ffffff">
    <colgroup>
        <col width="25%">
        <col width="25%">
        <col width="25%">
        <col width="5%">
        <col width="20%">
    </colgroup>
    <tr>
        <td>25</td>
        <td colspan="2">50</td>
        <td colspan="2">25</td>     
    </tr>
    <tr>
        <td colspan="2">50</td>
        <td colspan="2">30</td>
        <td>20</td>
    </tr>
</table>

【讨论】：