Question

我想画一张桌子

  P
Q [A B]
  [C D]

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

如何实现这一目标？我可以控制绘制边框的哪一行，但它无济于事，因为我无法为整行绘制边框。

Answer 1

做类似的事情：

<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>

然后使用CSS：

 td.border { border: 1px solid #000 }

Answer 2

td {
  border: 1px solid #999;
  padding: 10px;
}

td.no-border {
  border: 0;
}

tr.no-border td {
  border: 0;
}

<table>
  <tr class="no-border">
    <td></td>
    <td colspan="2">p</td>
  </tr>
  <tr>
    <td class="no-border">q</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td class="no-border"></td>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

我已经创建了一个ad hoc css类助手no-border，并将其仅应用于我想要无边框的单元格。

Answer 3

这是非表格解决方案。

    <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>

CSS

    .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;
}

JSFiddle：http://jsfiddle.net/harendra/EUZru/

Answer 4

此解决方案（纯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>

jsfiddle

中的示例

绘制一个简单的表格，其中一些单元格没有边框

4 个答案: