html TD行跨度不工作

vddsk6oq  于 2023-06-27  发布在  其他
关注(0)|答案(7)|浏览(98)

我有一张table:

<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"  
style="display:block">
<tr>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70" 
height="49" alt=""></td>
<td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410" 
height="21" alt="">
<td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410" 
height="29" alt=""></td>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195" 
height="50" alt=""></td>
</td>
</tr>
</table>

它应该是3列表,其中第二个和第三个td在一列中。但是,现在它是在2列。

mspsb9vt

mspsb9vt1#

检查你的CSS
这将阻止您跨越:

td { display: inline-block; }

根据Simon_Weaver的另一个案例,如后面的评论:

{ display: flex}
tag5nh1u

tag5nh1u2#

您在第一个和最后一个上使用了rowspan="2"。Rowspan表示此单元格跨越两行。如果希望单元格跨越同一行中的两列,则必须使用colspan属性。看看这两个片段,看看它们的区别:

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>
<tr>
    <td colspan="2">a</td>
    <td>b</td>
    <td>c</td>
</tr>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td rowspan="2">a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>d</td>
        <td>e</td>
    </tr>
</table>
lsmd5eda

lsmd5eda3#

您忘记关闭第二个<td />标记。

f4t66c6m

f4t66c6m4#

您可以在TD中创建一个包含两行的新表。

<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0" style="display: block;">
  <tr>
    <td rowspan="2">
      <img src="https://picsum.photos/70/49" width="70" height="49" alt="" />
    </td>
    <td>
      <table width="410">
        <tr>
          <td valign="top">
            <img src="https://picsum.photos/410/21" width="410" height="21" alt="" />
           </td>
        </tr>
        <tr>
          <td valign="bottom">
            <img src="https://picsum.photos/410/29" width="410" height="29" alt="" />
          </td>
        </tr>
      </table>
    </td>
    <td rowspan="2">
      <img src="https://picsum.photos/195/50" width="195" height="50" alt="">
    </td>
  </tr>
</table>
uwopmtnx

uwopmtnx5#

正如mpcabd在他们的回答中所说的那样,在第二个<td>的末尾缺少</td>标记
但是,另一个问题是您没有rowspan="2"进入的第2行。
我猜你是为了这个。。

<table>
  <tr>
    <td rowspan="2"><img ... /></td>
    <td><img .. /></td>
    <td rowspan="2"><img .. /></td>
  </tr>
  <tr>
    <!-- Note, you don't need anything here, as the rowspan will take it's place -->
    <td><img .. /></td>
    <!-- Note, you don't need anything here, as the rowspan will take it's place -->
  </tr>
</table>
bnlyeluc

bnlyeluc6#

试试这个:

<table>
  <tr>
    <td rowspan="2">a</td>
    <td>b</td>
    <td rowspan="2">d</td>
  </tr>
  <tr>
    <td>c</td>
  </tr>
</table>

小提琴:http://jsfiddle.net/oc9vabvx/

qf9go6mv

qf9go6mv7#

第二个图像必须在下一行。通过第一列的rowspan=2,它将被添加到第二列:

<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"  
       style="display:block">
  <tr>
    <td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70" 
         height="49" alt=""></td>
    <td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410" 
        height="21" alt=""></td>
    <td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195" 
     height="50" alt=""></td>
  </tr>
  <tr>
    <td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410" 
        height="29" alt=""></td>
  </tr>
</table>

相关问题