How create table only using tag and Css

by 
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Runnable snippet:

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}
<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>

More Related Contents:

  1. Browser is not displaying images
  2. How can I select an element with multiple classes in jQuery?
  3. Why is there an unexplainable gap between these inline-block div elements? [duplicate]
  4. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  5. Put icon inside input element in a form
  6. Grid properties not working on elements inside grid container
  7. Is element block level or inline level?
  8. Can I change the checkbox size using CSS?
  9. Maintain the aspect ratio of a div with CSS
  10. How do I give text or an image a transparent background using CSS?
  11. Border length smaller than div width?
  12. How to center an element in the middle of the browser window?
  13. Styling an anchor tag to look like a submit button
  14. Hide html horizontal but not vertical scrollbar
  15. Why is there vertical scroll on the main container?
  16. Scrolling to an Anchor using Transition/CSS3
  17. Can a ::before selector be used with a ?
  18. CSS data attribute new line character & pseudo-element content value
  19. CSS grid wrapping
  20. How can I create a row-based masonry layout using CSS?
  21. Selecting the last element among various nested containers
  22. Why using absolute position causes the div to be on top?
  23. Element with “display: inline-flex” has a strange top margin
  24. How to flatten nested divs to display them in a CSS grid?
  25. Align a div to center
  26. Make Bootstrap’s Carousel both center AND responsive?
  27. Why is my .sticky-top class not working in Bootstrap 4?
  28. Use the HTML tag as a background image instead of the CSS background-image property?
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment