javascript - 通过HTML或Img标签上的文本使TD成形 | 通过HTML或Img标签上的文本使TD成形

我想实施，
到目前为止我已经实施了，
我写的代码是这样的，

  <html>
  <body>
     <hr color="#FFCC66"/>
     <table width="100%" style="color: blue; margin-top: -3;margin-bottom: -3;">
     <tbody>
         <tr>
             <td align="center" style="font-weight:bolder;"
                 background="" valign="top">
             <img src="cellbackground.png" width="100%" height="100%" alt="" />
                Who You Are
             </td>
             <td align="center" style="font-weight:bolder; z-index:1; ">
                 <div style="height:100%; width:100%;
                      background-origin : content;
                      background-size:100%;
                      background-image:url(cellbackground.png) ">
                  Applicant's Needs
                </div>
             </td>

             <td align="center" style="font-weight:bolder;">
                Background Information
             </td>
         </tr>
     </tbody>
     </table>
     <hr color="#FFCC66"/>
  </body>
  </html>

如果有更好的方法来实现这一点，那么请建议，如果我们可以给表格的单元格边界形状，那么这是非常好的方法。
重点是实现应该支持几乎所有的浏览器。
和cellbackground.png文件，
提前谢谢。

最佳答案

不能对表格单元格进行形状调整。您可能希望将图像用作背景，并将size属性设置为cover或contain：

td.bubble {
    background-image: url(http://i.stack.imgur.com/ommAw.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    height: 50px;
}

<table width="100%" style="color: blue; margin-top: -3;margin-bottom: -3;">
    <tbody>
        <tr>
            <td align="center" style="font-weight:bolder;" background="" class="bubble" valign="top">
               Who You Are</td>
            <td align="center" style="font-weight:bolder; z-index:1; ">
                <div style="height:100%; width:100%;
                      background-origin : content;
                      background-size:100%;
                      background-image:url(cellbackground.png) ">Applicant's Needs</div>
            </td>
            <td align="center" style="font-weight:bolder;">Background Information</td>
        </tr>
    </tbody>
</table>

根据需要调整尺寸。

关于javascript - 通过HTML或Img标签上的文本使TD成形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29107631/