div css を使用してテーブル Dialogs_html/css_WEB-ITnose をシミュレートする-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:46:56

オリジナル

1338 人が閲覧しました

< html xmlns="http://www.w3.org/1999/xhtml">
div CSS を使用して表の対角線をシミュレートします 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;}
80px;">