Question

我坚持使用HTML嵌套表进行此练习，有人可以提供一些帮助吗？

我似乎无法让蓝色标题跨越我设置的12列。

我将第二行colspan上的<td>设置为colspan="6"，因此每个会占据宽度的一半，而我认为标题上的colspan="12"会占用<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> body {background-color:black; } table { width:580px; height:300px; border:2px auto; margin: 0px auto; } .grey {background-color:grey;} .blue {background-color:blue;} .red {background-color:red; color:grey;} .cyan {background-color:cyan;color:grey;} .green {background-color:lime;color:grey;} #outer {color: white; text-align: center; } #greytext { color:#333; width:150px; } #nested {width:150px; height:90px; border:2px solid black; } #nestedtext {color:#666; width:60px; font-size:21px;} } </style> </head> <body> <table> <tr> <td ="colspan="12" rowspan="1" class="blue"><p id="outer">Outer Table</p></td> </tr> <tr> <td rowspan="6" colspan="6" class="grey"> <p id="greytext">This is an example of nested tables. </td> <td rowspan="6" colspan="6" class="grey"> <table id="nested"> <tr> <td rowspan="4" colspan="1"> <p id="nestedtext">Pick a color</p> </td> </tr> <tr rowspan="1" colspan="2"> <td class="red"><p>Red</p></td> </tr> <tr rowspan="1" colspan="2"> <td class="cyan"><p>Blue</p></td> </tr> <tr rowspan="1" colspan="2"> <td class="green"><p>Green</p></td> </tr> </table> </td> </tr> </table> </body> </html>填充整个宽度，但它被限制在宽度的一半，我不知道我做错了什么。

这应该是这样的：

NSJSONSerialization

Answer 1

在你的第一个单元格中，你有一个领先=“ 删除它可以解决问题

 body {
   background-color: black;
 }
 table {
   width: 580px;
   height: 300px;
   border: 2px auto;
   margin: 0px auto;
 }
 .grey {
   background-color: grey;
 }
 .blue {
   background-color: blue;
 }
 .red {
   background-color: red;
   color: grey;
 }
 .cyan {
   background-color: cyan;
   color: grey;
 }
 .green {
   background-color: lime;
   color: grey;
 }
 #outer {
   color: white;
   text-align: center;
 }
 #greytext {
   color: #333;
   width: 150px;
 }
 #nested {
   width: 150px;
   height: 90px;
   border: 2px solid black;
 }
 #nestedtext {
   color: #666;
   width: 60px;
   font-size: 21px;
 }
}

<table>
  <tr>
    <td colspan="12" rowspan="1" class="blue">
      <p id="outer">Outer Table</p>
    </td>
  </tr>

  <tr>
    <td rowspan="6" colspan="6" class="grey">
      <p id="greytext">This is an example of nested tables.
    </td>

    <td rowspan="6" colspan="6" class="grey">
      <table id="nested">
        <tr>
          <td rowspan="4" colspan="1">
            <p id="nestedtext">Pick a color</p>
          </td>
        </tr>

        <tr rowspan="1" colspan="2">
          <td class="red">
            <p>Red</p>
          </td>
        </tr>
        <tr rowspan="1" colspan="2">
          <td class="cyan">
            <p>Blue</p>
          </td>
        </tr>
        <tr rowspan="1" colspan="2">
          <td class="green">
            <p>Green</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

看起来像一个简单的拼写错误：<td ="colspan="12" rowspan="1" class="blue"><p id="outer">Outer Table</p></td>

应该是：<td colspan="12" rowspan="1" class="blue"><p id="outer">Outer Table</p></td>

适用于这个小提琴：https://jsfiddle.net/Lajf9v0d/

HTML中的嵌套表帮助

2 个答案: