不同行的HTML表格单元格宽度

Question

不同行的HTML表格单元格宽度

39

可能是重复问题：
表格单元格宽度问题

我有一个设置为：

<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>

如何使这两行的单元格宽度不同？

- user544079

如果您想让一行变成两行宽度，请使用 rowspan。 - Ruben

5

双重提交 https://dev59.com/uG025IYBdhLWcg3wjGtO - DanielB

1

好的，假设您添加了一行并为该行设置了rowspan="2"，则它的宽度将是单个行的两倍大小，如果您将其设置为3，则将是三倍大小。但我认为通过谷歌搜索可能比我的解释更好。 - Ruben

1

@Mythje 我觉得你把 rowspan 和 colspan 搞混了 :) - roryf

@roryf 哦，哈哈，是的，好的指出来，谢谢 ^^ 是我不好。 - Ruben

表格是用于表达表格数据的，而不是条形图。 - Quentin

4个回答

34

据我所知，这是不可能的，因为你试图做的事情违背了表格数据呈现的理念。但你可以将数据放在多个表格中，并删除它们之间的任何填充和边距，以达到相同的视觉效果。以下是一个示例：

<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

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

- Till

这是唯一可行的解决方案，也是一个合理（最小化hacky）的方法。 - Matthew Wolman

13

表格中的单元格宽度不能随意不同，这通常是任何空间（例如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。

- roryf

我正在编写一个HTML电子邮件，因此我更喜欢使用内联样式。 - user544079

1

@user544079 啊，这样就更有意义了。 - roryf

7

使用 5 列和 colspan，这是可能的（点击这里）（但对我来说没有太多意义）：

<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>

- oezi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TokPhobia · Accepted Answer

一个解决方案是将您的表格分成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