Semantic UI's table component is not quite mobile-friendly even with the stackable option. Actually, there is no standard way to make a stable responsive. A horizontal scrollable table is often being used, but if you like a stackable way, and with a table header as a label on each row, then in this article, I will show you how to do it using existing Semantic UI's table component with some small changes.<figure class="image"><img src="https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw4fHxyZXNwb25zaXZlfGVufDB8fHx8MTY0OTAyMjIwNA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@jessbaileydesigns?utm_source=DNX&amp;utm_medium=referral">Jess Bailey</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>here is a <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/responsive-table">demo</a></blockquote>First of all, let's disable the stackable, i.e. use “unstackable” instead., and then add “data-label” attribute to the table cell. which is corresponding to the table header. And the sample HTML code like below:<pre><code class="language-html" id="3xiOTigIt"> &lt;Table celled unstackable striped className="dnxTable"&gt;
 &lt;Table.Header&gt;
 &lt;Table.Row&gt;
 &lt;Table.HeaderCell&gt;Header1&lt;/Table.HeaderCell&gt;
 &lt;Table.HeaderCell&gt;Header2&lt;/Table.HeaderCell&gt;
 &lt;Table.HeaderCell&gt;Header3&lt;/Table.HeaderCell&gt;
 &lt;/Table.Row&gt;
 &lt;/Table.Header&gt;

 &lt;Table.Body&gt;
 &lt;Table.Row&gt;
 &lt;Table.Cell data-label="Header1"&gt;Cell&lt;/Table.Cell&gt;
 &lt;Table.Cell data-label="Header2"&gt;Cell&lt;/Table.Cell&gt;
 &lt;Table.Cell data-label="Header3"&gt;Cell&lt;/Table.Cell&gt;
 &lt;/Table.Row&gt;
 ...
 &lt;/Table.Body&gt;
 &lt;/Table&gt; </code></pre>Next, we need to add some CSS, which is applied to the small screen only.<pre><code class="language-css" id="nEz4fULEL">@media only screen and (max-width: 767px) {
 table.dnxTable {
 border: none !important;
 }
 
 table.dnxTable th,
 table.dnxTable td {
 padding: 1em 0.5em;
 position: relative;
 }

 table.dnxTable tr,
 table.dnxTable td,
 table.dnxTable tfoot {
 display: block !important;
 width: 100%;
 }

 table.denxTable tbody tr {
 border-top: 1px solid rgba(34, 36, 38, 0.1);
 }

 table.denxTable tfoot tr {
 border: none !important;
 }

 table.dnxTable td {
 border-top: none !important;
 border-left: none !important;
 }
 
 table.dnxTable tbody tr {
 padding: 0.25em 0;
 border: 1px solid rgba(34, 36, 38, 0.2);
 }

 table.dnxTable tbody tr:not(:last-child) {
 margin-bottom: 0.25em;
 }

 /** important1: hide theader **/
 table.dnxTable thead {
 display: none !important;
 }

 table.dnxTable tbody td {
 padding: 0.3em 0.5em 0.3em 7.5em !important;
 }

 .dnxTable td:not(:last-child) {
 border-bottom: 1px solid rgba(34, 36, 38, 0.1);
 }

 /** important2: use data-label attribute as a table header **/
 table.dnxTable tbody td:before {
 content: attr(data-label);
 left: 0.5em;
 position: absolute;
 top: 0.15em;
 font-weight: bold;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 6em;
 overflow: hidden;
 }
}</code></pre>As the comments in the CSS code able, there are two important things:<ol><li>Hide the regular table header, because the table cells are stacked, and we show the corresponding table header at the beginning of the cell content.&nbsp;</li><li>Use the <code>data-label </code>attribute as the content of <code>td:before</code>.&nbsp;</li></ol><blockquote>td.before has “absolute” position, so it does not auto-wrap. In the case, the header is very long, I use &nbsp;ellipsis to hide the overflow part. And the width: 6em need to be matched to the padding left of &lt;td&gt;, which is 7.5em. so there are 1.5em padding between label and cell content.</blockquote>Other CSS definitions could be customized especially those paddings.Here is the <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/responsive-table">demo</a>

Semantic UI's table component is not quite mobile-friendly even with the stackable option. Actually, there is no standard way to make a stable responsive. A horizontal scrollable table is often being used, but if you like a stackable way, and with a table header as a label on each row, then in this article, I will show you how to do it using existing Semantic UI's table component with some small changes.

All Posts In Repsonsive