Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
Tables are a great way to group a set of similar items into rows and columns. Many Databases such as SQL, Postgresql, etc make use of tables to store data. Semantic UI provided us with a styled table. Let's have a look at table fixed variation classes.
Semantic UI Table Fixed Variation Classes:
- fixed: This class is used to create a unique table that does not resize the table cells in response to the content.
Syntax:
<table class="ui fixed table">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Example 1: In the below example, we have created a standard fixed table.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Fixed Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Table Fixed Variation</h4>
<hr>
<table class="ui fixed table">
<thead>
<tr>
<th>Language</th>
<th>Release Date</th>
<th>Link</th>
<th>About</th>
</tr>
</thead>
<tbody>
<tr>
<td>Node.js</td>
<td>2009</td>
<td>https://www.geeksforgeeks.org/nodejs/</td>
<td>Node.js is an open-source and cross-platform
runtime environment built on Chrome's V8
JavaScript engine for executing JavaScript
code outside of a browser.
</td>
</tr>
<tr>
<td>C++</td>
<td>1985</td>
<td>https://www.geeksforgeeks.org/c-plus-plus/</td>
<td>C++ is a general purpose programming language
and widely used now a days for competitive
programming. It has imperative,
object-oriented and generic programming features.
</td>
</tr>
<tr>
<td>Java</td>
<td>1996</td>
<td>https://www.geeksforgeeks.org/java/</td>
<td>Java has been one of the most popular
programming languages for many years.
Java is Object Oriented. However, it is
not considered
as pure object-oriented as it provides
support for primitive data types
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Example 2: In the below example, we have created a single line fixed table.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Fixed Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Table Fixed Variation</h4>
<hr>
<table class="ui single line fixed table">
<thead>
<tr>
<th>Language</th>
<th>Release Date</th>
<th>Link</th>
<th>About</th>
</tr>
</thead>
<tbody>
<tr>
<td>Node.js</td>
<td>2009</td>
<td>https://www.geeksforgeeks.org/nodejs/</td>
<td>Node.js is an open-source and cross-platform
runtime environment built on Chrome's V8
JavaScript engine for executing JavaScript
code outside of a browser. </td>
</tr>
<tr>
<td>C++</td>
<td>1985</td>
<td>https://www.geeksforgeeks.org/c-plus-plus/</td>
<td>C++ is a general purpose programming language
and widely used now a days for competitive
programming. It has imperative, object-oriented
and generic programming features. </td>
</tr>
<tr>
<td>Java</td>
<td>1996</td>
<td>https://www.geeksforgeeks.org/java/</td>
<td>Java has been one of the most popular programming
languages for many years. Java is Object
Oriented. However, it is not considered
as pure object-oriented as it provides
support for primitive data types </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Reference link: https://semantic-ui.com/collections/table.html#fixed