Question

我想在另一个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的顶部。

Answer 1

我不确定你在寻找什么，但如果你想在第一个背景上显示你的文字看看

$(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>

Answer 2

您的问题非常混乱，但为什么不使用<th>将文字放在上面，如下所示：

＆＃13;

 <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>

＆＃13;

然后，您可以将CSS中的<th>样式调整为您希望如何显示它。

HTML-TABLE：另一个tr上的一个tr

2 个答案: