2016-08-19 87 views
-1

我想在另一个tr标记上有一个tr标记。HTML表格:一个tr在另一个tr上

HTML

<table width="600" align="center"> 
    <tbody> 
     <tr> 
     <td height="10" align="center" style="background-color:#f1f1f1;"></td> 
     </tr> 
     <tr> 
     <td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;"> 
      <table width="600" border="0" align="center"> 
       <tbody> 
        <tr> 
        <td> 
         <table width="600" align="center"> 
          <tbody> 
           <tr> 
           <td valign="top" align="center" id="1" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; line-height: 30px; letter-spacing:0.5px; text-align:center; padding-bottom: 0px; padding-left: 0px; padding-top: 60px;"> 
            <span class="wrap_textbox" style="font-weight: lighter; font-size: 26px;"> Some Text</span> 
           </td> 
           </tr> 
          </tbody> 
         </table> 
        </td> 
        </tr> 
       </tbody> 
      </table> 
     </td> 
     </tr> 
    </tbody> 
</table> 

我希望文本上的背景div顶部。

want some text to be on top

+0

你可以在另一张桌子的内部嵌套一张桌子......这就是你想在这里做的事情...... – fernando

+0

是的......但我有不透明的透明背景。并在里面我有文字。但我想要文本成为背景的顶部。我不能使用div由于HTML Emailers –

+0

尝试从嵌套表中删除'opacity:0.5;'并将背景从'#fa4b00'更改为'rgba(250,75,0,5)'。将背景颜色指定为rgba应该只在背景上设置不透明度,而不是为整个元素设置不透明度的“opacity”属性,它是孩子。 – antidecaf

回答

0

我实际上并不知道什么是你寻找,但如果你想展示你的第一个背景文字看看

$(document).ready(function(){ 
 
    $(".wrap_textbox").clone().appendTo("#top"); 
 
});
table tr td table tr td .wrap_textbox{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<table width="600" align="center"> 
 
<tbody> 
 
    <tr> 
 
    <td height="10" align="center" style="background-color:#f1f1f1;" id="top"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;"> 
 

 
<table width="600" border="0" align="center"> 
 
<tbody> 
 
<tr> 
 
<td> 
 
<table width="600" align="center"> 
 
<tbody> 
 
<tr> 
 

 
<td valign="top" align="center" id="1" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; line-height: 30px; letter-spacing:0.5px; text-align:center; padding-bottom: 0px; padding-left: 0px; padding-top: 60px;"> 
 

 
<span class="wrap_textbox" style="font-weight: lighter; font-size: 26px;"> Some Text</span> 
 

 
</td> 
 

 
</tr> 
 

 
</tbody> 
 
</table> 
 

 
</td> 
 

 
</tr> 
 

 
</tbody> 
 
</table> 
 

 
</td>

+0

我无法使用第三方库。因为我可以只有HTML,CSS(内联)。 –

+0

我有这个代码表的其他背景的文字tr td table tr td .wrap_textbox {display:none;} –

+0

我正在制作HTML电子邮件,所以不能使用第三方库 –

0

你的问题是相当令人困惑,但为什么不使用<th>来放置上面的文本,如下所示:

<table width="600" align="center"> 
 
     <tr style="background-color: #f1f1f1;"> 
 
      <th style="font-weight: lighter; font-size: 26px;"> 
 
       Some Text 
 
      </th> 
 
     </tr> 
 
     <tr> 
 
      <td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;"> 
 
       <table width="600" border="0" align="center"> 
 
        <tr> 
 
         <td> 
 
          more text 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </table>

,然后可以调整在CSS中<th>风格你想要的显示。