I'm trying to add these font awesome sort icons to a table and it's not aligning right. I also tried ml-auto and it's not aligning to the right properly.
What I want is, align that arrows to the right side of the cell.
Any help you can provide would be greatly appreciated.
Live Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
<table id="grid" class="table table-hover sortable">
<thead class="thead-dark">
<tr>
<th data-type="string">?</th>
<th data-type="string"><i class="fas fa-sort text-right"></i>Socre:</th>
<th data-type="number"><i class="fas fa-sort text-right"></i>Age:</th>
<th data-type="number"><i class="fas fa-sort text-right"></i>Student:</th>
<th class="wfixed" data-type="string">Status:</th>
</tr>
</thead>
</table>
</div>
Can you move them in the markup? If so just move them to the other side of the text.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
<table id="grid" class="table table-hover sortable">
<thead class="thead-dark">
<tr>
<th data-type="string">?</th>
<th data-type="string"></i>Score:<i class="fas fa-sort text-right"></th>
<th data-type="number"></i>Age<i class="fas fa-sort text-right">:</th>
<th data-type="number"></i>Student:<i class="fas fa-sort text-right"></th>
<th class="wfixed" data-type="string">Status:</th>
</tr>
</thead>
</table>
</div>
Related
I am trying to make my site more user friendly, I have a table as shown in the image below which is putting lines under the text of the columns that have bootstrap classes to remove them on smaller screens.
I can't seem to get rid of this issue. I am using standard bootstrap 4 CSS.
My code for the table looks like this, appreciate the help.
<div class='container mx-auto' style='width: 100%'>
<table class='table table-hover' style='width: 100%'>
<thead class='bg-primary text-white'>
<tr>
<th class='bg-primary text-white border-left border-right d-none d-xl-block'>ID</th>
<th class='col-2 bg-primary text-white border-left border-right'>Date</a></th>
<th class='bg-primary text-white d-none d-lg-block'>Venue</th>
<th class='bg-primary text-white'>Comp</th>
<th class='bg-primary text-white border-left border-right d-none d-lg-block'>M/F</th>
<th class='col-2 bg-primary text-white border-left border-right'>Home Team</th>
<th colspan='2' class='col-1 bg-primary text-white border-left border-right text-center'>Score</th>
<th class='col-2 bg-primary text-white border-left border-right'>Away Team</th>
<th class='bg-primary text-white border-left border-right d-none d-md-block'>Referee</th>
<th class='bg-primary text-white border-left border-right text-center'>Edit</th>
<th class='bg-primary text-white border-left border-right text-center'>Delete</th>
</tr>
</thead>
<tbody>
<?php
if($result = mysqli_query($link,$sql)) {
while ($row = mysqli_fetch_array($result)) {
echo "
<tr>
<td class='border-left border-right d-none d-xl-block'>{$row[6]}</td> <!-- ID -->
<td class='border-left border-right'><a href='viewMatch.php?matchID={$row[6]}'>{$row[0]}</a></td><!-- Date -->
<td class='text-left border-left border-right d-none d-lg-block'>{$row[1]}</td><!-- Venue -->
<td class='border-left border-right'>{$row[2]}</td><!-- Comp -->
<td class='border-left border-right d-none d-lg-block' style='text-align:center'>{$row[7]}</td><!-- Gender -->
<td class='border-left border-right'>{$row[3]}</td><!-- Home Team -->
<td class='border-left border-right' style='text-align:center'>{$row[8]}</td><!-- Home Score -->
<td class='border-left border-right' style='text-align:center'>{$row[9]}</td><!-- Away Score -->
<td class='border-left border-right'>{$row[4]}</td><!-- Away Team -->
<td class='border-left border-right d-none d-md-block'>{$row[5]}</td><!-- Referee -->";
if($role >= 5) {
echo "
<td class='border-left border-right text-center'>
<form action='../edit/updateMatch.php' method='POST' onsubmit=''/>
<input type='hidden' name='q' value='".$row[6]."'/><button class='btn btn-primary' type='Submit' value='Update'><i class='fa fa-edit'></i></button>
</form>
</td>";
}
if($role > 5) {
echo "
<td style='text-align:center'>
<form action='../delete/deleteMatch.php' method='POST' onsubmit='' onclick='return confirm(`do you want to delete {$row[3]} vs {$row[4]} on the {$row[0]}`)'/><input type='hidden' name='q' value='".$row[6]."' /><button class='btn btn-danger' type='Submit' value='Delete'><i class='fa fa-trash'></i></button>
</form>
</td>";
}
echo "
</tr>";
}
echo "
</tbody>
</table>
</div>
</div>";
the problem is with -block suffix in the classes. You should use -table-cell instead.
See more in documentation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class='container mx-auto' style='width: 100%'>
<table class='table table-hover' style='width: 100%'>
<thead class='bg-primary text-white'>
<tr>
<th class='bg-primary text-white border-left border-right d-none d-xl-table-cell'>ID</th>
<th class='col-2 bg-primary text-white border-left border-right'>Date</a></th>
<th class='bg-primary text-white d-none d-lg-table-cell'>Venue</th>
<th class='bg-primary text-white'>Comp</th>
<th class='bg-primary text-white border-left border-right d-none d-lg-table-cell'>M/F</th>
<th class='col-2 bg-primary text-white border-left border-right'>Home Team</th>
<th colspan='2' class='col-1 bg-primary text-white border-left border-right text-center'>Score</th>
<th class='col-2 bg-primary text-white border-left border-right'>Away Team</th>
<th class='bg-primary text-white border-left border-right d-none d-md-table-cell'>Referee</th>
<th class='bg-primary text-white border-left border-right text-center'>Edit</th>
<th class='bg-primary text-white border-left border-right text-center'>Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
In a (bootstrap-based) HTML page I have a table.
In a table cell, I'd like some content that is top-aligned, and some other content in the same cell that is bottom-aligned (there generally is enough vertical space). How can this be achieved? What I'd like to avoid is to work with fixed pixel spacing.
A MWE is here:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow"></div>
</td>
<td>
<div>top - aligned</div>
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Please check out this. Do you want something like this?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow"></div>
</td>
<td>
<div class="">top - aligned</div>
<div class="mt-5">
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Here I have added margin top to the button. class="mt-5"
You may add a column
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col" colspan="2">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow" />
</td>
<td>
<div>top - aligned</div>
</td>
<td class="align-bottom text-right">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
or use absolute position
.bottom-right {
bottom: 0;
right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow" />
</td>
<td class="position-relative">
<div>top - aligned</div>
<div>
<button type="button" class="btn btn-primary btn-sm position-absolute bottom-right m-1">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
If it is only a visual layout matter, rethink the structure without a table , possible example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container ">
<div class="container-fluid ">
<div class="row table-dark table-striped">
<div class="col-sm-6 p-0 border-bottom border-secondary">
<h2 class="px-3 border-bottom border-secondary">title 1</h2>
<div style="height: 100px;" class="m-3 bg-warning text-dark">100px</div>
</div>
<div class="col-sm-6 d-flex flex-column p-0 border-bottom border-secondary">
<h2 class="pr-3 border-bottom border-secondary m-0">title 2</h2>
<div class="pr-3">top - aligned</div>
<div class="text-right mt-auto p-3">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
<div class="col-sm-6 p-0 border-bottom border-secondary">
<div style="height: 150px;" class="m-3 bg-info ">150px</div>
</div>
<div class="col-sm-6 p-3 d-flex flex-column p-0 border-bottom border-secondary">
<div class="pr-3">top - aligned</div>
<div class="text-right mt-auto">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
</div>
</div>
</div>
It still would be nice to have a solution for a <table>, but I adopted the suggestion by #G-Cyrillus and used bootstrap classes to achieve this. If there is a better solution, please post, I will be happy to accept it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="container">
<div class="container-fluid" >
<div class="row">
<div class="col-6" style="background-color: grey">
<img src="x" height=100 />
</div>
<div class="col-6" style="background-color: yellow">
<div class="h-100 d-flex flex-column">
<div class="row">
content at top
</div>
<div class="row align-items-end justify-content-end flex-grow-1" style="background-color: orange">
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With Bootstrap 4, I want my cols to be align in multiple row.
If I set rows and cols it works just fine but if one of my col need to fit 2 slot with flex-grow:2 it create a little gap between rows. I tried every flex's stuff with no success.
Here you can have the link to try it. I created 2 cases, one with divs and the other (the one I care) with a table with the row class.
Link on w3schools
.col{
border:1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col" style="flex-grow:2.08">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
<br/>
<div class="container">
<table class="table">
<thead>
<tr class="row">
<th class="col">Firstname</th>
<th class="col">Lastname</th>
<th class="col">Email</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col" style="flex-grow:2">John (2.07 in flex-grow works in 1080p...)</td>
<td class="d-none">Doe</td>
<td class="col">john#example.com</td>
</tr>
<tr class="row">
<td class="col">Mary</td>
<td class="col">Moe</td>
<td class="col">mary#example.com</td>
</tr>
<tr class="row">
<td class="col">July</td>
<td class="col">Dooley</td>
<td class="col">july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In the first example you can see a little gap between the "1" / "2" and "2" / "3" and its the same in the second example.
I really need to use flex-grow because in my full code some of my TDs have a fixed width in PX and others TDs need to fit empty space but with the same width (or twice if I set the flex-grow:2)
It seems that W3 schools has noticed an issue too, hence their "2.07 in flex-grow...".
I'm not sure why it's occurring, but a work-around can be to add a class to those td's and then add media queries for that class at different screen sizes.
For example:
#media screen and (min-width: 992px) {
.alter-flex{
flex-grow: 2.09;
}
}
Goodnight.
Does anyone know how to keep the content inside the card using a table inside the card with MaterializeCSS?
Im working with VUE y MaterilizeCSS but it's de same without VUE.
Apparently the responsive table does not communicate with the card.
This is my code:
<div>
<h3>Artículos</h3>
<div class="row">
<div class="col s12 m12 xl12">
<div v-if="loading" class="center-align">
<div class="progress center-align">
<div class="indeterminate"></div>
</div>
</div>
<div class="card">
<div v-if="!loading" class="card-content black-text">
<span class="card-title">
Lista de Artículos <a class="waves-effect waves-teal btn-flat"><i class="material-icons">playlist_add</i></a>
<div class="input-field" style="font-weight: normal;">
<input placeholder="Buscar" id="first_name" type="text" class="validate"
v-model="search"
#keyup="get(1,search)">
</div>
</span>
<table class="highlight centered responsive-table">
<thead style="color: #5d5d5d; font-size: 13px;">
<tr>
<th>Código</th>
<th>Nombre</th>
<th>Presentación</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<tr v-for="article in arrayArticles" :key="article.id">
<td v-text="article.code"></td>
<td v-text="article.name"></td>
<td v-text="article.presentation"></td>
<td v-text="article.description"></td>
<td v-text="article.category.name"></td>
<td v-text="article.minimum_stock"></td>
<td v-if="article.current_stock >= article.minimum_stock">
<span class="badge green" style="color: white">{{article.current_stock}}</span>
</td>
<td v-else>
<span class="badge red" style="color: white">{{article.current_stock}}</span>
</td>
<td>${{article.purchace_price}}</td>
<td>${{article.sale_price}}</td>
<td>${{article.sale_price - article.purchace_price}}</td>
<td>
<div v-if="article.condition">
<span class="badge green" data-badge-caption="Inactivo" style="color: white"></span>
</div>
<div v-else>
<span class="badge blue-grey lighten-3" data-badge-caption="Inactivo" style="color: white"></span>
</div>
</td>
<td class="center-align">
<i class="material-icons" style="margin-left: 2px; color:#ffc107; cursor:pointer;"
#click="getById(article), fillSelectCategories()">edit</i>
<i style="margin-left: 5px; color:#ff6f00; cursor:pointer;" class="material-icons"
#click="deativate(article.id)">clear</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Attached picture of the table coming out of the card
Try this way :
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title">Card Title</span>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Item Name</th>
<th>Item Description</th>
<th>Item Quantity</th>
<th>Item Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>11232132131</td>
<td>Alvin</td>
<td>Eclair</td>
<td>Chocolate</td>
<td>5</td>
<td>$1.00</td>
<td>$5.00</td>
</tr>
<tr>
<td>24646546464</td>
<td>Alan</td>
<td>Jellybean</td>
<td>Chocolate</td>
<td>7</td>
<td>$5.00</td>
<td>$35.00</td>
</tr>
<tr>
<td>36798799797</td>
<td>Jonathan</td>
<td>Lollipop</td>
<td>Chocolate</td>
<td>5</td>
<td>$8.00</td>
<td>$40.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I have a tablular structure (a table with no th) that looks like:
---1--- ---2---
---3--- ---4---
I want it be like this is mobile screens:
---1---
---2---
---3---
---4---
Whatever I do i can't design that. My suggested code:
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">1</td>
<td class="col-xs12 col-sm-6 display-block">2</td>
</tr>
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">3</td>
<td class="col-xs12 col-sm-6 display-block">4</td>
</tr>
</tbody>
</table>
always results
1
2
3
4
and without display-block always results
---1--- ---2---
---3--- ---4---
If you use bootstrap you have to set col-xs-12 instead col-xs12 (add -)
See JSFiddle:https://jsfiddle.net/v09bzj89/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs-12 col-sm-6 ">1</td>
<td class="col-xs-12 col-sm-6 ">2</td>
</tr>
<tr class="row">
<td class="col-xs-12 col-sm-6">3</td>
<td class="col-xs-12 col-sm-6">4</td>
</tr>
</tbody>
</table>
Use media query and add the display: block style in that block only, so that it applies only in a particular resolution.
// This style will be applied only below screen widths 600px
#media screen and (max-width: 600px) {
.display-block {
display: block !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media screen and (max-width: 600px) {
.display-block {
display: block !important;
}
}
</style>
</head>
<body>
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">1</td>
<td class="col-xs12 col-sm-6 display-block">2</td>
</tr>
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">3</td>
<td class="col-xs12 col-sm-6 display-block">4</td>
</tr>
</tbody>
</table>
</body>
</html>