21

html

<table border="1">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
</tr>
</table>

これは、このような境界線を出力します

+---+---+
|   |   |
+---+---+
|   |   |
+---+---+

しかし、このように td しないで、テーブルのみに境界線を表示したい

+--------+
|        |
|        |
|        |
+--------+

HTMLマークアップだけでどうすればよいですか。(CSS なし / インライン スタイルなし)

場合によっては、次のようなものを表示するために、いくつかの td ボーダーのみといくつかの td ボーダーを削除する必要があります。

+---+---+
|   |   |
+---+   |
|   |   |
+---+---+
4

8 に答える 8

17

私の端からの簡単な解決策は、別のテーブルを境界線で保持し、テーブルを外側のテーブルに挿入することです。

<table border="1">
<tr>
    <td>
        <table border="0">
            <tr>
                <td>one</td>
                <td>two</td>
            </tr>
            <tr>
                <td>one</td>
                <td>two</td>
            </tr>
        </table>
    </td>
</tr>

</table>
于 2013-09-04T09:51:49.560 に答える
8

div で囲み、境界線を付けてテーブルから境界線を削除します

<div style="border: 1px solid black">
    <table border="0">
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
</div>

ここで動作するフィドルを確認できます

あなたの更新された質問に従って....境界線を追加または削除したい場所。最初にhtmlテーブルから境界線を削除してから、次のことを行う必要があります

<td style="border-top: 1px solid black">

上の境界線のみが必要であると仮定します。同様に、あなたは他の人のためにしなければなりません。4つのCSSクラスを作成するより良い方法...

.topBorderOnly {
    border-top: 1px solid black;
}

.bottomBorderOnly {
    border-bottom: 1px solid black;
}

次に、要件に応じて CSS をコードに追加します。

<td class="topBorderOnly bottomBorderOnly">

これにより、上下の境界線が追加されます。残りの部分も同様です。

于 2013-09-04T09:48:10.807 に答える
1

試す：

<table border="1">
  <tr>
    <td>
      <table border="">
      ...
      </table>
    </td>
  </tr>
</table>
于 2013-09-04T09:53:28.070 に答える
0 
<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table border="0">
                <tr>
                    <td>one</td>
                    <td>two</td>
                </tr>
                <tr>
                    <td>one</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
于 2013-09-04T09:56:36.807 に答える