【问题标题】:A table row was 1 columns wide, which is less than the count established by the 1st row(4)表格行宽 1 列,小于第 1 行建立的计数 (4)
【发布时间】:2016-07-05 21:03:41
【问题描述】:

虽然这个问题已经出现在这个论坛中,但它并没有解决我的特殊问题,因为我的列是在表格行元素中专门定义的。我尝试过使用 colgroup 和 colspan,每次添加都会导致更多错误和警告。我不明白的是,我的计数不是用我可以看到的 (4) 建立的。我猜括号内的 4 表示 4 列。在我的研究中,我访问了 w3.org 表结构、WDG,并观看了许多 Youtube 视频,此外还咨询了 Web Development & Design Foundation 文本第 7 版。如果我理解警告的意思,我可以解决这个问题。所以我来这里寻求帮助。这是我的代码。我会很感激任何建议或线索。

 <table class="first">
 <caption>TV Programs I Watch Most</caption>
 <thead>
 <tr>
    <th id="name">Network</th>
    <th id="shows">Favoite Shows</th>
    <th id="chan">Channel</th>
    <th id="sche">Schedule</th>
  </tr>
   </thead> 
  <tbody>
  <tr>
   <td headers="name">AJAM</td>
   <td headers="shows">Inside Story</td>
   <td headers="chan">347</td>
   <td headers="sche">M-F 8:30PM</td>
   </tr>
   <tr>
   <td headers="name">BET</td>
   <td headers="shows">Tyler Perry</td>
   <td headers="chan">329</td>
   <td headers="sche">M-F 1:00PM</td>
  </tr>
  <tr>
   <td headers="name">MSNBC</td>
   <td headers="shows">Rachel Maddow</td>
   <td headers="chan">356</td>
   <td headers="sche">M-F 9:00PM</td>
  </tr>
  <tr>
   <td headers="name">LINK</td>
   <td headers="shows">Democracy Now</td>
   <td headers="chan">375</td>
   <td headers="sche">M-F 9:00AM</td>
   </tr>

   <tr>
    <td>
        <table class="second">
        <caption>Show Rankings</caption>

            <tr>
                <th rowspan="5">My Take</th>
                <th id="show">show</th>
                <th id="rank">rank</th>

            </tr>   

            <tr>

                <td headers="show">Inside Story</td><td rowspan="2"         headers="rank">5</td>
            </tr>
            <tr>
                <td headers="show">Rachel Maddow</td><!-- <td     headers="rank"></td> -->
            <tr>
                <td headers="show">Democracy Now</td><td headers="rank">4</td>
            </tr>
            <tr>
                <td headers="show">Tyler Perry</td><td    headers="rank">3</td>
            </tr>

        </table>
    </td>
    </tr>
 </tbody>
 </table>

我也将包含 CSS 代码:

    h1{
    margin-bottom:0px;
   }
  h2{
  font-size:1.5em;
 margin:0px 0px;
 }
 nav{

 margin-bottom:15px;
 }

 nav a{
 color:#96e;
 background-color:#cecece;
 text-decoration:none;
 padding-right:10px;

 }  


 caption{
line-height:150%;
font-size:1.5em;
font-style:italic;
}
table.main{
border-spacing:3px;
}
table.main thead{
background-color:#96e;
color:#ffffff;
text-align:left;
}
table.main td{
 background-color:#eaeaea;
 color:#96e;
vertical-align:top;
 }
 table.first{
font-family: Times, "Times New Roman", Georgia, serif;
width:50%;
height:auto;
border-style:inset;
border-spacing:3px;
background-color:#cecece;
color:#808080;
text-align:left;
padding-bottom:5px;
}

table.second{
font-family:"Lucida Console", Courier, monospace;
width:300px;
border-spacing:2px;
background-color:#c0c0c0;
color:#808080;
border:1px dashed #eaeaea;
text-align:left;
padding:5px;
}

table.second th{
background-color:#96e;
color:#ffffff;
text-align:center;
} 
table.second td{
background-color:#eaeaea;
color:#000000;
text-align:center;
vertical-align:middle;
}

table a{
text-decoration:none;
}
#rank{
color:#00bfff;
} 
#show{
color:#00bfff;
}
#name{
color:#00bfff;
}
#shows{
color:#00bfff;
}
#chan{
color:#00bfff;
}
#sche{
color:#00bfff;
}
.first th{
background-color:#96e;
color:#96e;
}
.second th{
background-color:#96e;
color:#96e;
}

【问题讨论】:

    标签: html html-table col colgroup


    【解决方案1】:

    您已将此表:&lt;table class="second"&gt; 嵌套到一个 &lt;td&gt; 中。但是 this 围绕&lt;td&gt; 是它所在行(即最后一行)中唯一的&lt;td&gt;,它与所有其他行(都有四个)中的&lt;td&gt; 的数量冲突。

    【讨论】:

    • P.S.:对不起,我在写我的答案的第一个版本时误解了一些东西 - 这个“编辑”的答案完全不同......
    • 非常感谢您对我的耐心。我并不总是一个快速学习的人。不过,我终于明白了。我从头开始重新设计所有内容,在再次构建嵌套表时测试每个表行。对我来说,识别点是当我将 colspan=4 添加到我放置嵌套表的最后一个数据单元格时。然后我了解到嵌套表本身实际上被计为一个单元格,因此将单元格增加到跨越 4 列是有意义的。再次感谢您。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-07-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-24
    相关资源
    最近更新 更多