Easy HTML-CSS3 Table 6-Columns

Posted at

An Easy Web-Design, Uncomplicated Table'Like Flowing Data-Organizer.

/* size */
.ttable, .ttable:before, .ttable:after, .ttable.clear, .ttable.clear:before, .ttable.clear:after{
  content:       "";
  clear:         both;
  padding:       0px;
  margin:        0px;
  width:         100%;
}
.ttable div{ 
  float:         left;
  display:       inline;
  margin-right:  5px;
  margin-bottom: 5px;
}

.ttable div:last-child { margin-right: 0; }

/* style */
.ttable div{
  border:            1px solid black;
  padding-left:      10px;
  padding-right:     10px;
  background-color:  rgba(237,237,214,.4);
}





This is column 1

This is column 2

This is column 3

This is column 4

This is column 5

This is column 6








several width cases:
2014-09-27_134303

2014-09-27_134136

2014-09-27_134114




jsfiddle playground: