Question

我想实施，

enter image description here

到目前为止我已经实施了，

enter image description here

我编写的代码是这样的，

  <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文件，

enter image description here 提前谢谢。

Answer 1

您可以使用Pseudo-element和类激活

＆＃13;

table{
  border-top: 2px solid #ff6600;
  border-bottom: 2px solid #ff6600;
  width: 100%;
  color: blue;
  margin-top: -3px 0;
  padding: 10px 0
}

table td{font-weight:bolder;
  text-align: center; 
  vertical-align: top;
  position: relative;
  border-radius: 6px;
  padding: 10px 0;
}
table td.active{
  background: #ff6600;
  color: white
}
table td.active:before{
  content: '';
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ff6600;
  top: 100%;
  left: 50%;
  margin-left: -5px;
}

＆＃13;

<html>
  <body>
     <table>
     <tbody>
         <tr>
             <td class=active>
               Who You Are
             </td>
             <td>
                 Applicant's Needs
             </td>

             <td>
                Background Information
             </td>
         </tr>
     </tbody>
     </table>
  </body>
  </html>

＆＃13;

Answer 2

您无法塑造表格单元格。您可能希望将图片用作背景，并将尺寸属性设置为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>

调整尺寸以适应。

在HTML或Text over Img标记中赋予TD形状

2 个答案: