materialize tables | responsive table in materialize - deesoft service

materialize tables | responsive table in materialize

Deepak Tailor Image
Deepak Tailor - Jan 09 2021
materialize tables | responsive table in materialize

We manage a lot of data in the form of a table so that we can read the data easily. Materialize CSS has given us a class for this. So that we can responsive to tables.

Live Demo 
<table>
<thead>
  <tr>
      <th>Name</th>
      <th>Item Name</th>
      <th>Item Price</th>
  </tr>
</thead>
<tbody>
    <tr>
    <td>PHP</td>
    <td>Codeigniter</td>
    <td>$0.87</td>
    </tr>
    <tr>
    <td>JAVA</td>
    <td>Spring Boot</td>
    <td>$3.76</td>
    </tr>
    <tr>
    <td>Python</td>
    <td>Flesk</td>
    <td>$7.00</td>
    </tr>
</tbody>
</table>
Striped table

From the stripped class we can set the background color in the table.

Live Demo 
<table class="striped">
<thead>
	<tr>
	    <th>Name</th>
	    <th>Framework</th>
	    <th>Price</th>
	</tr>
</thead>

<tbody>
	<tr>
	  <td>PHP</td>
	  <td>Codeigniter</td>
	  <td>$0.87</td>
	</tr>
	<tr>
	  <td>JAVA</td>
	  <td>Spring Boot</td>
	  <td>$3.76</td>
	</tr>
	<tr>
	  <td>Python</td>
	  <td>Flesk</td>
	  <td>$7.00</td>
	</tr>
</tbody>
</table>
Highlight table

With the Highlight class, we can set the background color on the hover in the table.

Live Demo 
<table class="highlight">
<thead>
  <tr>
      <th>Name</th>
      <th>Framework</th>
      <th>Price</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>PHP</td>
    <td>Codeigniter</td>
    <td>$0.87</td>
  </tr>
  <tr>
    <td>JAVA</td>
    <td>Spring Boot</td>
    <td>$3.76</td>
  </tr>
  <tr>
    <td>Python</td>
    <td>Flesk</td>
    <td>$7.00</td>
  </tr>
</tbody>
</table>
Centered table

With the Centered class, we can set the text of the table in the center.

<table class="centered">
  <thead>
    <tr>
        <th>Name</th>
        <th>Framework</th>
        <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>PHP</td>
      <td>Codeigniter</td>
      <td>$0.87</td>
    </tr>
    <tr>
      <td>JAVA</td>
      <td>Spring Boot</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Python</td>
      <td>Flesk</td>
      <td>$7.00</td>
    </tr>
  </tbody>
</table>
Responsive table

With the responsive table class, we can respond to the table on all devices.

Live Demo 
<table class="responsive-table">
<thead>
  <tr>
      <th>Name</th>
      <th>Framework</th>
      <th>Price</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>PHP</td>
    <td>Codeigniter</td>
    <td>$0.87</td>
  </tr>
  <tr>
    <td>JAVA</td>
    <td>Spring Boot</td>
    <td>$3.76</td>
  </tr>
  <tr>
    <td>Python</td>
    <td>Flesk</td>
    <td>$7.00</td>
  </tr>
  <tr>
    <td>Javascript</td>
    <td>React Js</td>
    <td>$7.00</td>
  </tr>
  <tr>
    <td>Android Hybrid</td>
    <td>Flutter</td>
    <td>$7.00</td>
  </tr>
</tbody>
</table>
Deepak Tailor Image
Deepak Tailor

My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in