自定义 TableRow 列宽答案

【问题标题】：Customize TableRow Column Width自定义 TableRow 列宽
【发布时间】：2012-07-06 14:16:52
【问题描述】：

我有一个 HTML 表格。

第一行有 5 个元素，而第二行只有 3 个元素。

为什么第 2 行 3 列的宽度与前一行各列的宽度相同？

我的意思是，由于第二行只有 3 列，它们不应该自动调整大小以填充行吗？

我尝试设置第二行第二列的宽度，但 ALSO 增加了第一行第二列的宽度，这是我不想要的。

任何帮助表示赞赏。

编辑

需要的输出

【问题讨论】：

粘贴你的 html，它提供了更好的想法
@satindersingh 第一个<tr> 有5 个<td>，第二个<tr> 有3 个<td>。

标签： html css html-table

【解决方案1】：

嘿，现在习惯了colspan

像这样

        <table width="100%" cellspacing="0" cellpadding="0">
<tr class="blue">
<td width="35%"></td>
<td width="15%">SignUp</td>
<td width="15%">Create Blog</td>
<td width="15%">Custimize Blog</td>
<td width="15%">Success</td>
</tr>

  <tr>
    <td colspan="5">
    <table width="100%" cellspacing="5" cellpadding="0">
<tr>
<td class="blue2">Create Blog</td>
<td class="blue3">Custimize Blog</td>
<td class="blue4">Success</td>
      </tr></table>
    </td>
  </tr>

</table>

CSS

table tr td{
text-align:center;
}
.blue{
background:lightblue;
}


.blue2{
background:red;
}


.blue3{
background:blue;
}
.blue4{
background:green;
}

现场演示http://tinkerbin.com/vqnhht02

现在根据您的设计更改为width或height

【讨论】：

不，这将使第 2 行的第 1 列等于第 2 行的 3 列，这是我不想要的。

【解决方案2】：

试试这个：

`<table width="100%" cellspacing="0" cellpadding="0">
  <tr class="blue">
    <td width="20%"></td>
    <td width="15%"></td>
    <td width="15%">SignUp</td>
    <td width="15%">Create Blog</td>
    <td width="15%">Custimize Blog</td>
    <td width="15%">Success</td>
  </tr>

  <tr>
    <td class="blue" colspan="2">Create Blog</td>
    < td class="blue" colspan="2">Custimize Blog</td>
    <td class="blue" colspan="2">Success</td>
  </tr>
</table>`

根据需要给背景颜色。

我认为这个宽度问题已解决。

【讨论】：