html表rowspan，但不要拉伸行背景

发布于 2025-01-31 12:36:59 字数 699 浏览 1 评论 0原文

我创建了一个表，中间行跨越了2行。我想超过2行中的该行中的内容，但不要跨越背景，

这是我的表格当前当前表

我想保持特定的行颜色，同时还使用行跨度拉伸列，例如第一张图片我希望行背景如何看起来

这是可能的吗？我在电子邮件模板中使用此表，所以我确实有有限的解决方案

，这是当前的代码

 <table>
  <tr bgcolor="red">
    <td>left</td>
    <td rowspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr bgcolor="green">
    <td>left</td>
    <td>right</td>
  </tr>
</table>

原文

I have created a table where the middle row spans over 2 rows.
I would like to span the content in the row over 2 rows, but not span the background

This is what my table looks like currently current table

I would like to keep the specific row colours like in this picture while also using row span to stretch the column like in the first picture how I want the row backgrounds to look

Is this possible?
I am using this table in an email template so I do have limited solutions

here is the current code

 <table>
  <tr bgcolor="red">
    <td>left</td>
    <td rowspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr bgcolor="green">
    <td>left</td>
    <td>right</td>
  </tr>
</table>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烏雲後面有陽光 2025-02-07 12:36:59

您必须使用colspan而不是rowspan：

<table>
  <tr bgcolor="red">
    <td>left</td>
    <td colspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr bgcolor="green">
    <td>left</td>
    <td colspan="2"></td>
    <td>right</td>
  </tr>
</table>

You have to use colspan instead of rowspan:

<table>
  <tr bgcolor="red">
    <td>left</td>
    <td colspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr bgcolor="green">
    <td>left</td>
    <td colspan="2"></td>
    <td>right</td>
  </tr>
</table>

回复收藏 0 原文

夜血缘 2025-02-07 12:36:59

我认为此代码将帮助您获得所需的桌子外观。

<table>
    <tr bgcolor="red">
      <th>left</th>
      <th>MIDDLE</th>
      <th>right</th>
    </tr>
    <tr bgcolor="green">
      <td>left</td>
      <td></td>
      <td>right</td>
    </tr>
</table>

I think this code will help you to get your desired table look.

<table>
    <tr bgcolor="red">
      <th>left</th>
      <th>MIDDLE</th>
      <th>right</th>
    </tr>
    <tr bgcolor="green">
      <td>left</td>
      <td></td>
      <td>right</td>
    </tr>
</table>

回复收藏 0 原文

离笑几人歌 2025-02-07 12:36:59

以＆lt; td＆gt;为目标，因此它重叠＆lt; tr＆gt;颜色并使用线性级别值具有50％的红色和50 ％绿色背景：

tr:first-of-type td:nth-of-type(2) {
  background-image: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
  background-size: 100%;
}

此外，如果您认真使用高级CSS，则HTML中没有内联风格。他们将从＆lt; style＆gt;标签和＆lt; link＆gt;中覆盖样式。

tr:first-of-type {
  background: red;
}

tr:first-of-type td:nth-of-type(2) {
  background-image: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
  background-size: 100%;
}

tr:last-of-type {
  background: green
}

<table>
  <tr>
    <td>left</td>
    <td rowspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr>
    <td>left</td>
    <td>right</td>
  </tr>
</table>

Target the <td> so it overlaps the <tr> color and use linear-gradient value to have a 50% red and 50% green background:

tr:first-of-type td:nth-of-type(2) {
  background-image: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
  background-size: 100%;
}

Also, if you are serious about using advanced CSS, do not have inline styles in your HTML. They will override styles from <style> tag and <link>.

tr:first-of-type {
  background: red;
}

tr:first-of-type td:nth-of-type(2) {
  background-image: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
  background-size: 100%;
}

tr:last-of-type {
  background: green
}

<table>
  <tr>
    <td>left</td>
    <td rowspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr>
    <td>left</td>
    <td>right</td>
  </tr>
</table>

回复收藏 0 原文

~没有更多了~