四隅のない表の作り方_html/css_WEB-ITnose

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 グリッドでも境界線を設定できます

0572d4cd1b35dc476974f10bb8d51b58
1db5dc461bce4e4fb8f062ab7d439b31
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7table6e916e0f7d1e588d4f442bf645aedb2f
< ;style> ;

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

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

531ac245ce3e4fe3d50054a55f265927 ;/head>

6c04bd5ca3fcae76e30b72ad730ca86d
a34de1251f0d9fe1e645927f19a896e8  b90dd5946f0946207856a8a37f441edf ee3d6b78a77ea32cbe11c2545077245b  b90dd5946f0946207856a8a37f441edf
a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c  b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c  b90dd5946f0946207856a8a37f441edf
a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c  b90dd5946f0946207856a8a37f441edf
f16b1740fad44fb09bfe928bcc527e08
73a6ac4ed44ffec12cee46588e518a5e { border-top: 1px ソリッドブラック;border-left: 1px ソリッドブラック;}
table td{border-right: 1px ソリッドブラック; border-bottom: 1px ソリッドブラック;}
531ac245ce3e4fe3d50054a55f265927 54f86d248076a7328e7a099fcbc05dde
a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf

<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 によって実装されています