嵌套表格中的 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

有两个内表，假设“我只需要内表的底部边框，而不是上、下、右、左”指的是它们两个，只需将不需要的边框设置为 none如下(见 jsfiddle ):

<style>
table table {
    border-top: none;
    border-left: none;
    border-right: none;
}
</style>

另一种纯 HTML 方式(效果很好，尽管在 HTML 4 中被标记为“已弃用”，在 HTML5 中被标记为“过时”)是在内部 frame="below" 元素中使用属性 <table>。参见 alternative jsfiddle。

不过，结果看起来很奇怪，也许你想问一些不同的问题。