2

テーブルを描きたい

  P
Q [AB]
  [CD]

ここで、A、B、C、Dは境界線で描かれています。QとPはテーブルのラベルであり、境界線で描画しないでください。QとPはAと揃える必要があります。

これを達成する方法は？境界線を描画する行を制御することはできますが、行全体の境界線を描画できないため、役に立ちません。

4

4 に答える 4

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 に答える
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 に答える
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 に答える