>웹 프론트엔드 >HTML 튜토리얼 >horizonal scroll bar,vertical top align ,display conten in one line css for table or div_html/css_WEB-ITnose

horizonal scroll bar,vertical top align ,display conten in one line css for table or div_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:28:411340검색

今天边学边做了些css的tasks.下面几点今后会用到。

.box
{
 overflow:auto;     // 1。

.....
当table内容过高或过长时自动产生scroll bar
}
.tbcontent{
font-family: Arial, Tahoma, Verdana, Calibri;
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 td, #customers th
  {
  font-size:1em;
  padding:3px 7px 2px 7px;
  height:20px;
  text-align:center;
  white-space:nowrap;// 2。...................
Column Header 1Column Header N
当列数过多的时候 Column Header 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: bold;}

// 4.能实现两个div 上对齐

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.