ホームページ > ウェブフロントエンド > htmlチュートリアル > 水平スクロールバー、垂直上揃え、内容を1行で表示テーブル用CSSまたはdiv_html/css_WEB-ITnose

水平スクロールバー、垂直上揃え、内容を1行で表示テーブル用CSSまたはdiv_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:28:41
オリジナル
1354 人が閲覧しました

今日は学習しながらいくつかの CSS タスクを実行しました。以下の点は将来使用されます。

.box
{
overflow:auto;

....
テーブルのコンテンツが高すぎるか長すぎる場合、スクロール バーが自動的に生成されます
}
.tbcontent{
font-family: Arial 、タホマ、ヴァーダナ、カリブリ;
border:solid #ababab;
-moz-border-radius: 5px;
border-bottom-width: 2px;
border-top-width: 25px;
width: 100%;
text - align:left;
}
#customers
{
font-family:"Trebuchet MS"、Arial、Helvetica、sans-serif;
width:100%;
border-collapse:collapse;
border:solid #999999;
border-bottom-width: 2px;
border-top-width: 25px;
-moz-border-radius: 5px;
}

#customers th
{
font-size:1em;
padding : 3px 7px 2px 7px;
高さ:20px;
text-align:center;
white-space:nowrap;// 2. ......... .
列ヘッダー 1列ヘッダー N
列が多すぎる場合、列ヘッダー k が複数の行に表示されます。
}

#customers th
{
font-size:1.1em;
text-align: center;
padding-top:5px;
padding-bottom:4px;
background-color:#bcbcbc;
color:#ffffff;
}

#customers tr.alt td // 3. 横断歩道を実現
{
color:#000000;
background-color:#dedede;
text-align:center;
}
.title
{
position:relative;
top:20px;
left:10px;
color : #ffffff;
font-weight:old;}

// 4. 2 つの div を整列させることができます

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート