四隅のない表の作り方_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css

以下のような効果の表を作りたい
やり方がわからない

ディスカッションへの返信（解決策）

Table
{
1px black
テーブル tr境界線左: 1pxソリッドブラック; 。

<style>table.noouterborder td{border:solid 1px black;border-right:none;border-bottom:0px}table.noouterborder td.top{border-top:none}table.noouterborder td.left{border-left:none}</style><table class="noouterborder" cellpadding="5" cellspacing="0"><tr><td class="top left">1</td><td class="top">1</td><td class="top">1</td><td class="top">1</td><td class="top">1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1<br />11</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></table>

ログイン後にコピー

<style>table.noouterborder td{border:solid 1px black;border-right:none;border-bottom:0px}table.noouterborder tr.top td{border-top:none}table.noouterborder td.left{border-left:none}</style><table class="noouterborder" cellpadding="5" cellspacing="0"><tr class="top"><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1<br />11</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></table>

ログイン後にコピー

td {            border-right:1px solid #ccc;            border-bottom:1px solid #ccc;            width:50px;            height:50px;        }        table {            border-collapse:collapse;            empty-cells:show;        }        td:last-child {            border-right:none;        }        tr:last-child td {            border-bottom:none;        }

ログイン後にコピー

セルには内容がないため、実際には

width、height

および空のセルを削除できます

セルには内容がないため、実際には

width、height
And empty を削除できます-cells
セルには実際にはコンテンツがあります

セルにはコンテンツがないため、実際には
width,height を削除できます

そして空のセル

セルには実際にはコンテンツがあります

こんにちは、私が書いた TD にはコンテンツがないと言いました。

セルにはコンテンツがないため、実際には
幅、高さ
、空のセルを削除できます
セルには実際にはコンテンツがあります

こんにちは、私が書いた TD にはコンテンツがないと言いました。

そのような機能はJSとjqを使用して実装できるか、アドバイスをありがとうございます

jqueryを使用して実装できますが、もちろんjsでも実装できます。

jqueryのセレクターはw3c標準に完全に準拠しているため、私が書いたcssセレクターで対象の要素を選択するためにjqueryのセレクターを使用することもできます。

しかし、なぜスクリプトを介して実装する必要があるのかわかりません。

Extjs グリッドでも境界線を設定できます

"http://www.w3.org/TR/html4/strict. dtd ">

table
< ;style> ;

table{border-top: 1px 単色黒;border-left: 1px 単色黒;}

td{border-right: 1px 単色黒;}

;/head>

<
< ;td>

{ border-top: 1px ソリッドブラック;border-left: 1px ソリッドブラック;}
table td{border-right: 1px ソリッドブラック; border-bottom: 1px ソリッドブラック;}

<table>       <tr>           <td></td>           <td></td>           <td></td>       </tr>       <tr>           <td></td>           <td></td>           <td></td>       </tr>        <tr>           <td></td>           <td></td>            <td></td>       </tr>   </table>

ログイン後にコピー

テストを入力してください。実行可能です。jquery によって実装されています