为什么行跨度为"3"删除一整行并将其设置为"2". [英] Why does rowspan "3" delete one entire row and sets it to "2"

查看:45
本文介绍了为什么行跨度为"3"删除一整行并将其设置为"2".的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要有关 rowspan 的帮助,我将其设置为3,将 colspan 设置为3,但是它会删除整行并将其设置为2.我的表中有4行,但是当我编写代码时,它最终会变成3行.我不明白为什么它的跨度不正确,感谢您的回答,这是下面的HTML代码.

I need help with rowspan, I set it to 3 and colspan to 3, but it deletes one entire row and sets it to 2. I have 4 rows in my table but when I write the code it ends up to 3 rows. I don't understand why doesn't it span properly, thanks for the answer, here is the HTML code below.

td {
  text-align: center;
  border: 2px solid black;
}

<table style="border-collapse: collapse; table-layout: fixed; border: 2px solid black;" align="center" width="50%" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="4">7</td>
    <td rowspan="2" colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="3">8</td>
    <td rowspan="3" colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

推荐答案

这确实很奇怪,但是显然原因是您的列中的 none 实际上包含四个单元格(最多三个),并且所有单元格只有很少的内容(如果有的话),因此表格正被缩小/压缩为三行.

That's really strange behaviour, but the reason obviously is that none of your columns actually contains four cells (three is the most) and all cells only have very little content (if at all), so the table is being reduced/compressed to three rows in height.

我肯定会称其为浏览器的渲染或解释错误.但是...

I would definitely call that a rendering or interpretation error of the browser. But...

关键点似乎是第一行中的第二个单元格,该单元格应该高两行:如果您实际上在其中添加了更多内容,它的将会高出两行,而整个表将根据需要显示.请参阅下面的代码段,其中与代码唯一真正的区别是第二个 td 中的附加内容:

The crucial point seems to be the second cell in the first row, which should be two rows high: If you actually put some more content into it, it will be two rows high, and the whole table will be displayed as desired. See my snippet below, where the only real difference to your code is the additional content in the second td:

table {
  border-collapse: collapse;
  table-layout: fixed;
  border: 2px solid black;
}

td {
  text-align: center;
  border: 2px solid black;
}

<table align="center" width="50%" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="4">A1</td>
    <td rowspan="2" colspan="2">A2 containing more text</td>
    <td>A3</td>
    <td colspan="3">A4</td>
  </tr>
  <tr>
    <td rowspan="3">B1</td>
    <td rowspan="3" colspan="3">B2</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
  </tr>
  <tr>
    <td>D1</td>
    <td>D2</td>
  </tr>
</table>

P.S .:也请注意我的答案,这是一个非常相似的问题.

P.S.: Note also this answer of mine to a very similar question.

这篇关于为什么行跨度为"3"删除一整行并将其设置为"2".的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆