<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight" >
<tbody>
<tr height="20">
<td rowspan="3" width="4%" style="vertical-align: middle;"><p style="transform: rotate(270deg);white-space: nowrap;">1.I have here some long title</p></td>
<td colspan="6" rowspan="3" width="384" >Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>
</body>
</html>
The problem is that i want to have an vertical text and i used transform: rotate(270deg) but it makes the width of <td> not functionable. I wan to have an small one. Like:
Look here i have a picture
Use writing-mode and then rotate the text 180degrees.
The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
MDN
p {
white-space: nowrap;
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight">
<tbody>
<tr height="20">
<td rowspan="3">
<p>1.I have here some long title</p>
</td>
<td colspan="6" rowspan="3" width="384">Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>
p {
word-break: break-all;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight" >
<tbody>
<tr height="20">
<td rowspan="3" width="4%" style="vertical-align: middle;padding: 2rem;"><p>1.I have here some long title</p></td>
<td colspan="6" rowspan="3" width="384" >Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>
</body>
</html>
//screenshot is given below
1.I have here some long title.
Here i have some textHere i have some text
<tr>
<td style="vertical-align: middle;" rowspan="3" >
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word; white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>
<tr>
<td style="vertical-align: middle;" rowspan="3">
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word; white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>
</tbody>
</table>`enter code here`
</div>[![screenshot below][1]][1]
[1]: https://i.stack.imgur.com/6lfdT.png
Related
This question already has answers here:
Centering text in a table in Twitter Bootstrap
(10 answers)
Closed 10 months ago.
In this table how can I align the text in center? text-center is not working.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
You have to apply the Bootstrap-class: text-center to every single td not the the table! Alternativly you could consider creating a custom css with td { text-align: center; } which will be shorter and easier then applying the bvootstrap-class to every single td.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td class="text-center">name</td>
<td class="text-center">supplier </td>
<td class="text-center"><button>Delete</button> </td>
</tr>
</tbody>
</table>
You can use the classname text-center.
<div class="text-center">
I am centered
</div>
<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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<table class="table table-striped">
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
Or in CSS put this in the parent container
display: flex;
align-items: center;
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody align="center">
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
add align="center" to the tbody
use css classes, go checkout centertag - w3schools
.class{text-align:center;}
<tbody>
<tr>
<td class="center">name</td>
<td class="center">supplier </td>
<td><button class="center">Delete</button> </td>
</tr>
</tbody>`
I need to display something like the following picture in the empty cells of an html table (I'm using Bootstrap 4.3.1)
Source code:
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
Expected result:
Thank you in advance.
Use a gradient background combined with :empty
td:empty {
background:repeating-linear-gradient(-45deg, transparent 0 3px,#000 0 6px);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
An SVG if you want better rendering.
td:empty {
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 2 3"><line x1="0" y1="5" x2="4" y2="-1" stroke="black"></line><line x1="2" y1="5" x2="6" y2="-1" stroke="black"></line></svg>') 0 0/8px 12px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
you can use :empty
td:empty{
background:red;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Lois</td>
</tr>
</table>
</body>
</html>
My code works almost as I want it however after some research and trying I finally made my table scrollable however I can't seem to make the header stay fixed no matter what I try, could someone be able to help?
I need the header to be fixed so you can still see the headings when you scroll down the table of course.
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>
Add to th
position:sticky;
top:0;
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
.my-custom-scrollbar table th {
background:#b8daff;
position:sticky;
top:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>
You can use the following css with a little bit of js :
CSS
.sticky {
position: fixed;
top: 0;
width: 100%;
}
JS
window.onscroll = function() {stickyHeaderFunction()};
var header = document.getElementById("your_header");
var sticky = header.offsetTop;
function stickyHeaderFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}
You just have to use the th(header) to stick.
th {
background: white;
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
Demo:
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
th {
background: #B8DAFF;
position: sticky;
top: 0;
}
.table {
border-collapse: separate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>
I have a simple Bootstrap 4 table with 2 columns - I would like to be able to align some of the text in the top right column to the right, whilst leaving the remaining text in that cell left aligned.
Here's my table:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text-right">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
I'm trying to get the On Special string to be aligned to the right and on the same line as the SKU value - I've tried playing with and and but can't seem to get this to work. I'm not sure if this is even possible or if there's another way to tackle this problem?
It's quite simple; you just need to replace,
<div class="text-right">On Special</div>
with
<div class="float-right">On Special</div>
Find the complete working code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span class="float-right">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span style="float: right;">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
.text {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
Just change you this code :
<div class="text-right">On Special</div>
To this code :
<div style="float:right;">On Special</div>
You could start with something like this.
.text-right {
display: inline;
position: absolute;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text-right">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span class="float-right">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
I am using bootstrap3 for my table.
I need Login button in to be last column of the table.
I really need it to be in bootstrap only.
<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td rowspan='3'><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I tried but couldn't solve it.
Please help me.
<!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">
<style>
.table > tbody > tr > td {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td rowspan='3'><button class="btn btn-primary align-middle">Login</button></td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Might be you want this. If it is not, please elaborate where you exactly want the button.
<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td><button class="btn btn-primary">Login</button> </td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
<td><td>
</tr>
</tbody>
</table>
</div>
try this code
<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>