html - 自定义 TableRow 列宽

标签 html css html-table

我有一个 HTML 表格。

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


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

我的意思是因为第二行只有 3 列,它们不应该自动调整大小来填充行吗?

我尝试设置第 2 行第 2 列的宽度,但是增加了第 1 行第 2 列的宽度,这是我不想要的。

感谢任何帮助。


编辑

要求的输出

最佳答案

嘿,现在习惯了 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

现在根据您的设计更改为宽度高度

关于html - 自定义 TableRow 列宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11338590/

相关文章:

javascript - 专注于表格单元格/列

javascript - 突出显示具有不同值的表列 td

html - 当绝对 <div> 嵌套在其中时,相对 <th> 会失去边框

javascript - html 和 javascript 中的字母数字用户名

javascript - Morris.Line js 无法将年更改为月

CSS Flipper - iOS/Safari 问题

jquery - Angularjs Image Slider按键绑定(bind)不起作用并且

javascript - -> for 循环中的 -> 事件监听器中的函数可以有参数吗?

javascript - 在两个 HTML 注释行之间插入内容

html - 如何在 Bootstrap 3.3.7 中换行