Heim  >  Artikel  >  Web-Frontend  >  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
WBOYOriginal
2016-06-24 12:28:411299Durchsuche

今天边学边做了些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 上对齐

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn