Html Responsive Table Raw Css

HTML Responsive Table raw css
HTML tables allow web developers to arrange data into rows and columns. The quickest way to create responsive tables is by using CSS and <div> tag. Creating responsive tables using CSS without the traditional <table> tag can enhance the flexibility and design of your web pages.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Css

style.css

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  overflow:auto;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

HTML markup

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Write a Associte Comment
Markdown Editor