Javascript 绘制一个包含一些没有边框的单元格的简单表格

我想画一张桌子

P Q [A B] [C D] P Q[A B] [丁] 其中A、B、C、D用边框绘制。Q和P是表格的标签，不应使用边框绘制。Q和P应与A对齐

如何做到这一点？我可以控制要绘制边框的行，但这不会有帮助，因为我无法为整行绘制边框。

执行以下操作：

<table border="0" cellspacing="0">
    <tr>
      <th>&nbsp;</th>
      <th>P</th>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <th>Q</th>
      <td class="border">A</td>
      <td class="border">B</td>
    </tr>
    <tr> 
       <th>&nbsp;</th>
       <td class="border">C</td>
       <td class="border">D</td>
    </tr>
</table>

td{
边框：1px实心#999；
填充：10px；
}
td.无国界{
边界：0；
}
tr.无边界td{
边界：0；
}

P
Q
A.
B
C
D

此解决方案（纯HTML）适合您吗

<table>
    <tr>
        <td></td>
        <td colspan="2">P</td>
    </tr>
    <tr>
        <td>Q</td>
        <td rowspan="2">
            <table border="1">
                <tr>
                    <td>A</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td>C</td>
                    <td>D</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

P
Q
A.
B
C
D

---

中的示例是非表解决方案

    <div id="container">
<div class="row">
    <div id="top">P</div>
</div>
<div class="row">
    <div id="left">Q</div>
    <div id="table">
        <div class="row">
            <div class="cell">A</div>
            <div class="cell">B</div>
        </div>
        <div class="row">
            <div class="cell">C</div>
            <div class="cell">D</div>
        </div>
        <div class="row"></div>        
    </div>
</div>
</div>

---

JSFiddle:

你试过什么吗。。。向我们展示您的代码以便我们提供帮助使用嵌套表怎么样？您有一个示例吗？我不知道怎么做。嗯，表可能有点乱，用div加边框可能是最好的方法。没什么大不了的。等一下，我马上给你打电话。谢谢你。。。如果你认为我的答案足够好，你可以接受这个答案

    <div id="container">
<div class="row">
    <div id="top">P</div>
</div>
<div class="row">
    <div id="left">Q</div>
    <div id="table">
        <div class="row">
            <div class="cell">A</div>
            <div class="cell">B</div>
        </div>
        <div class="row">
            <div class="cell">C</div>
            <div class="cell">D</div>
        </div>
        <div class="row"></div>        
    </div>
</div>
</div>

    .cell{
    float:left;
    width:50px;
    border:1px solid #c0c0c0;
}
.row{
    display:block;
    overflow:auto;
}
#container{
    display:block;
    overflow:auto;
}
#top{
    display:block;
    overflow:auto;
    margin-left:20px;
}

#left{
    float:left;
    overflow:auto;
}

#table{
    float:left;
    overflow:auto;
    margin:5px;
    margin-top:0px;
}