ホームページ ウェブフロントエンド htmlチュートリアル div css を使用してテーブル Dialogs_html/css_WEB-ITnose をシミュレートする

div css を使用してテーブル Dialogs_html/css_WEB-ITnose をシミュレートする

Jun 24, 2016 am 11:46 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
<head> div CSS を使用して表の対角線をシミュレートします</title> css">
*{padding:0;margin:0;}
caption{font-size:14px;font-weight:bold;}
table{ border-collapse:collapse;border:1px #525152 Solid; width: 50%;margin:0 auto;margin-top:100px;}
th,td{border:1px #525152 Solid;text-align:center;font-size:12px;line-height:30px;background:# C6C7C6; }
th{background:#D6D3D6;}
/*対角線をシミュレート*/
.out{
border-top:40px #D6D3D6 Solid;/*上の境界線の幅は、最初の行の高さに等しいthe table*/
width:0px;/*コンテナの幅を0にする*/
height:0px;/*コンテナの高さを0にする*/
border-left:80px #BDBABD Solid;/*左の境界線の幅は、テーブルの最初の行の最初のグリッドに等しいです。 width*/
Position:relative;/*内部の 2 つのサブコンテナを絶対位置にします*/
}
b{font-style:normal ;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px ;width:55x;}
.t1{background:#BDBABD;}
</ style> 80px;">
<div class="out">
<b>カテゴリ</b>
< ;em>名前</em>
<th>クラス</th>
<th>クラス平均スコア</th>
</ tr>
</td>
<td>t;/td>それ;td>67</td>
<tr><t1>王</td> ;td>5

79

趙劉</td>
<td>三</td>
<td>6</td>
</table>
<div><A href="http://www.999jiujiu.com/"> http://www.999jiujiu.com/</div> </body>
</html>
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;の目的は何ですか 要素?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;の目的は何ですか 要素?

ナビゲーションとSEOにHTMLリンクを効果的に使用するにはどうすればよいですか? ナビゲーションとSEOにHTMLリンクを効果的に使用するにはどうすればよいですか? Mar 18, 2025 pm 02:39 PM

ナビゲーションとSEOにHTMLリンクを効果的に使用するにはどうすればよいですか?

See all articles