ホームページ > 記事 > ウェブフロントエンド > 四隅のない表の作り方_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> ;
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>