I'm using https://bootstrap-table.com/ plugins to search, have a pagination, sort a table in my HTML page, every feature work except for the export function. I've been lurking on forums for a few hours now and the only answer that seem to work is just use another plugin, but Bootstrap tables are really friendlier to the eye in my opinion.
I've run and added the requirements for the plugin itself, and added the https://github.com/hhurz/tableExport.jquery.plugin requirements too but i can't find a way to get to this result https://live.bootstrap-table.com/example/extensions/export.html, even with another online editor it fails, although i can't see any resources being loaded locally...
For the moment my HTML page looks like this (I'm working on Django if that matters in any ways):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Loading main stylesheets -->
<link rel="stylesheet" type="text/css" href="{% static 'main/main.css' %}">
<!-- Loading icon -->
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
</head>
<body>
<div class="container-fluid">
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table class="table" id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-show-export="true"
data-pagination="true"
data-search="true"
data-side-pagination="server"
data-click-to-select="true"
data-toolbar="#toolbar"
data-show-toggle="true"
data-show-columns="true"
>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-en-US.min.js"></script>
</body>
</html>
But no way to see the export button, am i missing some dependencies or something?
I can include my working tree but again, it's a basic Django app tree, since all resources look like they are being loaded from URLs, and even the top URLs from the official example https://examples.bootstrap-table.com/index.html#extensions/export.html#view-source don't help...
Thanks in advance for any help you could provide
As I can see you forgot to add a lot of libraries from the example. See more in snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- just added all required libraries from your example site -->
<link href="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="toolbar" class="select">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table class="table" id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-show-export="true"
data-pagination="true"
data-search="true"
data-side-pagination="server"
data-click-to-select="true"
data-toolbar="#toolbar"
data-show-toggle="true"
data-show-columns="true"
>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<h1 class="header">My Booklist</h1> <br>
<body>
<form>
<input class="book"></input><br><br>
<input class="author"></input><br><br>
<input class="isbn"></input><br><br>
<button class="btn">Submit</button>
</form>
<br>
<br>
<!-- <table class="tbl" >
<tr >
<th>book</th>
<th>author</th>
<th>isbn</th>
</tr>
</table>
<table class="table"> -->
<thead class="tbl">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</body>
</html>
please help me I am stuck because of this issue while learning. I have tried downloading and adding CDN but nothing is working for me to connect bootstrap. I have been trying to make an app using HTML, CSS, js but stuck in this very silly problem.
please help me I am stuck because of this issue while learning. I have tried downloading and adding CDN but nothing is working for me to connect bootstrap. I have been trying to make an app using HTML, CSS, js but stuck in this very silly problem.
Write the JavaScript CDNs just above the closing of the body tag. Try the code I wrote and you will see it works.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<h1 class="header">My Booklist</h1> <br>
<body>
<form>
<input class="book"></input><br><br>
<input class="author"></input><br><br>
<input class="isbn"></input><br><br>
<button class="btn btn-primary">Submit</button>
</form>
<br>
<br>
<!-- <table class="tbl" >
<tr >
<th>book</th>
<th>author</th>
<th>isbn</th>
</tr>
</table>
<table class="table"> -->
<thead class="tbl">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
your code seems ok except JavaScript cdn version. Your bootstrap css version is 5.0.0 where as your JavaScript version is 3.4.1.
You can update your "atest compiled JavaScript" cdn to
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
Instead of
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
I pray this fix may help you. Thank you.
I‘ve created a page with a data table with Bootstrap 4. In some cases the table is very large and the data retrieval takes a few seconds. Therefore I‘ve added a spinner / loader which shows that the page is still loading. However, the spinner does not stop as expected when the page is completely loaded and I can't find a note in the documentation how to implement this. Am I using the "div" element incorrectly or do I need JavaScript? - Unfortunately I have 0% knowledge of JavaScript. Or is this a browser/OS specific issue? (I'm using Firefox / Linux).
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, Table!</title>
</head>
<body>
<div class="container">
<div class="pt-3">
<span class="h1 mr-3">Large Table</span>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="table-responsive pt-3">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Name 1</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Name 2</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Name 3</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You can use
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
});
OR
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
});
or if you want to hide loader after checking the table is present in DOM or not, then you can check if the table is presnt or not by its tag or selctor length.
Something like this.
var yourElement= document.getElementById("yourElement");
if(yourElement){
// Element exists
}
By jQuery
if ($( "#yourElement").length) {
// element exists
}
$(document).ready(function() {
$('.spinner-border').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, Table!</title>
</head>
<body>
<div class="container">
<div class="pt-3">
<span class="h1 mr-3">Large Table</span>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="table-responsive pt-3">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Name 1</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Name 2</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Name 3</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I have a bootstrap table with overflow scroll (.table-responsive). Its working fine but i want to remove scroller from bottom. how can i remove it?
<!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.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered" style="width:1500px;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<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>
</div>
<script>
</script>
</body>
</html>
Is it because your table is wider than it's container. Either you remove the inline style with 1500px or give overflow-x: hidden; to the container which will disable the horizontal scrolling, but your table's width will be the same and a big part of it will be invisible
If you want to keep the horizontal scrolling, but want to hide the scrollbar, then you should try this:
div::-webkit-scrollbar{
display: none;
}
NOTE: it works only in webkit based browsers
I have included my plunker link here https://plnkr.co/edit/TD6iQJvIExwTeJ9QPbRS?p=preview
I want the submit button to appear at the right bottom of the table.My table width changes according to the data. My table's width is auto. So how will i position the button to right bottom everytime.
<!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.2.1/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>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<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 class="col-sm-1">
<button class="btn btn-success pull-right">SUBMIT</button>
</div>
</div>
</body>
</html>
You can try this code.
When trying remove last tr from tbody and check the width and button position.
<!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.2.1/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>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<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>
<tr>
<td>July jan</td>
<td>Dooley Hello</td>
<td>julyjan12345678#example.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right"><button class="btn btn-success pull-right">SUBMIT</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Change the Grid class to col-sm-12 and make the width of the table to 100%.
Added the Preview,
https://plnkr.co/edit/M3p2bpj460niGCu59irR?p=preview
I want to have a little not standard table. This is how it should look:
This is my demo. As you can see there, width of the first column is increased by text, but I don't want this behaviour. I want text to go from left to right in full row.
UPDATE:
For those who want to close question. Read below please.
I can't use additional tr and td with colspan for note. I use angular2 and datatables.net for tables and it will break selection and getting selected data.
use colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td colspan="3"><div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
since you don't want to use extra tr you may can use this method using css
.tr-holder>td {
padding-bottom: 35px !important;
}
.full-width {
position: absolute;
left: 0;
width: 100%;
padding: 0 9px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="tr-holder"> <!-- class added -->
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div class="full-width"> <!-- class added -->
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You could also add an inline CSS
<td style="max-width:50px;">Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
specify the width of your table.
add this css properties to your style sheet.it will work fine
table
{
table-layout: fixed;
width: 100px;
}
I'm added the snippet below.
table
{
table-layout: fixed;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
or you can apply style to your td div,as
td div { width: 100px; overflow: hidden; }
td div { width: 100px; overflow: hidden; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You could use something like bootstrap or foundations to simulate a table structure