嵌套表中的HTML表格边框问题

Question

我有嵌套表。两个表都需要边框。唯一的区别是我只需要内部桌子的底部边框而不是顶部，底部，右侧和左侧。我需要使用以下代码的默认边框样式。

<table border="1">

当我将此代码用于内部表时出现问题。它设置外边框而不是设置底部边框。如果我删除右上角和左上边框，则无法正确删除边框。请检查以下用于解决此问题的代码。

<table border="1" width="100%">
   <tr>
        <td valign="top">VMware Certified Professional</td>
        <td style="padding:0px;">
            <table border="1">
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
            </table>             
        </td>            
   </tr>                        
   <tr>
        <td valign="top">VMware Certified Associate</td>
        <td style="padding:0px;">
            <table border="1">
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
            </table>             
        </td>
   </tr>
</table>

附加屏幕截图以显示我需要的默认边框样式。

附件是我想要的布局

Answer 1

这是你在找什么？

http://jsfiddle.net/5Ax52/1/

使用CSS：

table.inner td {
    border-top: 1px solid #444;
    border-bottom: 1px solid #afafaf;
    width:100%;
}

Answer 2

有两个内部表，并假设“我只需要内部表格的底部边框而不是顶部，底部，右侧和左侧”指的是它们两个，只需设置您不想要的边框{ {1}}如下（见jsfiddle）：

none

另一种纯HTML方式（尽管在HTML 4中标记为“已弃用”且在HTML5中为“已废弃”）仍然有效，但在内部<style> table table { border-top: none; border-left: none; border-right: none; } </style> 元素中使用属性frame="below"。请参阅alternative jsfiddle。

但结果看起来很奇怪，也许你想要问一些不同的东西。

Answer 3

经过多次解决方案后。我发现以下解决方案对我有好处。

 <style>
   .tbl_head{ width:35%;}
</style>
<table cellpadding="3" border="1" align="center">
<tr>
  <td rowspan="3" valign="top" class="tbl_head">ALIGNVALIGNALIGN</td>
  <td>First</td>
</tr>
<tr>
  <td>Second</td>
</tr>
<tr>
  <td>Third</td>
</tr>
<tr>
  <td rowspan="3" valign="top" class="tbl_head">VALIGNALIGNVALIGN</td>
  <td>First</td>
 </tr>
<tr>
<td>Second</td>
</tr>
<tr>
  <td>Third</td>
</tr>
</table>