2

我想画一张桌子

  磷
问 [AB]
  [光盘]

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

如何做到这一点？我可以控制在哪一行绘制边框，但这无济于事，因为我无法为整行绘制边框。

4

4 回答 4

2

这是非桌面解决方案。

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

于 2012-11-29T10:21:12.263 回答
2

执行以下操作：

<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 }
于 2012-11-29T10:08:28.730 回答
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>

我创建了一个临时 css 类助手no-border，并将其仅应用于我想要无边界的单元格。

于 2012-11-29T10:08:46.693 回答
0

此解决方案（纯 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中的示例

于 2012-11-29T10:09:48.803 回答