html - 如何将单元格拆分为列,使它们的宽度与其下方的列相同

标签 html css html-table

我有下表,有两个标题单元格。第二个标题单元格需要分成两行,底部的行进一步分成 6 列(q1、q2、q3 等)。这些列的宽度应与其下一行的宽度相同。请查看图像和 fiddle 以查看我想要实现的目标。任何帮助都会很棒。 http://jsfiddle.net/CPSs9/

enter image description here

在这里 fiddle http://jsfiddle.net/CPSs9/

我的代码如下:

<table border="1" bordercolor="black" cellspacing="0">
  <tr>
        <th width="120">Booboo</th>
        <th colspan="5">blah blah</th>
      </tr>
  <tr>
    <td>&nbsp;</td>
    <td width="40">&nbsp;</td>
    <td width="40">&nbsp;</td>
    <td width="40">&nbsp;</td>
    <td width="40">&nbsp;</td>
    <td width="40">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

最佳答案

这很容易。您需要做的就是在第一个 th 上使用 rowspan 属性并向表中添加另一行。像这样:http://jsfiddle.net/skip405/CPSs9/1/

关于html - 如何将单元格拆分为列,使它们的宽度与其下方的列相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18658963/

相关文章:

jquery - 滚动某处后如何更改类

python - 如何添加功能以显示视频格式以及用户选择的下载分辨率

javascript - 使用 php 脚本的输出以非顺序方式更新表行

html - float 自动生成的 HTML

android - Unity HTML5(WebGL) 导出的项目无法在手机/平板电脑上运行

html - 无论我尝试什么,bootstrap 列都不会在它们之间创建空格,这是我的 html 结构吗?

html - IE7 中的 border-collapse 属性问题

javascript - 我可以读取 :before {content :'...' } string via JavaScript (getComputedStyle), 但此字符串的行为很奇怪

html - 默认伸展树(Splay Tree)形菜单的子节点

html - 在表格单元格中一致地换行文本