I dont know why but search and buttons like pdf,print not appear even though nothing is wrong.
This is my current table:
No Search and Button Table
This is the code:
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">1.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button></form>
<a type="submit" class="btn btn-danger btn-xs">Remove</a>
</div>
</td>
</tbody>
</table>
I delete some of the code in here because its too long
This is what I want to achieve:
Table that have search and buttons
This is my datatable script function:
$(function () {
$("#example1").DataTable({
"responsive": true, "lengthChange": false, "autoWidth": false,
"buttons": ["excel", "pdf", "print"]
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
});
Note: I noticed rowspan is making the table wrong but I really need that rowspan.
I made you like an extremely basic version but I think this is what you're going for. Look at the HTML I added and the CSS. I assumed there were many more of these tables. I added a search bar and some potential buttons for linking to an excel, pdf, or print.
.container {
width: 100%;
height: 100%;
background-color: lightblue;
border: solid;
overflow: visible;
}
.d-flex {
display: flex;
flex-direction: column;
}
.nav-comp {
list-style-type: none;
display: flex;
}
li {
background-color: lightgrey;
border: solid;
list-style-type: none;
width: 100px;
text-align: center;
font-weight: bold;
cursor: pointer;
padding: 5px;
margin-right: 10px;
}
input[type=search] {
position: absolute;
top: 2px;
right: 5px;
width: 30%;
text-align: right;
border: solid lightgrey;
border-radius: 10px;
}
table#example1 {
border-bottom: black solid;
margin-bottom: 1rem;
}
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<nav>
<ul class="nav-comp">
<li>Excel</li>
<li>PDF</li>
<li>Print</li>
</ul>
</nav>
<div class="search-bar">
<input type="search" placeholder="Search">
</div>
<div class="container">
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">1.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">2.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">3.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">4.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">5.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">6.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">7.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">8.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
</div>
You could try this code for search...
<table id="Example" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
Hope, it would help you..
Related
I have a table containing 3 columns of text and a fourth column with a button in it.
Normally the text in the text cells do not align vertically with the text in the button because the button gets a vertical-align value of 'middle'. So far they only way I've gotten the text in the text cells to align with the button text is to wrap them in a span and add an align-middle class. This seems like a fair amount of html bloat. Is there another way?
Here's an example of a table where some cells align and some don't, through the use of the extra span element.
I'm using bootstrap 5 but I think this applies to previous versions as well.
Edit
I've tried comparing different approaches
table with no vertical alignment classes
vertical alignment specified on the td
vertical alignment specified on the table
vertical alignment specified on a span in the td
#2 and #3 are functionally equivalent, but when some cells wrap and cause the row height to grow, text in cells that do not wrap center vertically within the entire cell.
#4, when some cells wrap and cause the row height to grow, text in cells that do not wrap still appear near the top, and are aligned closer to the alignment of the button text, but not perfectly, and the alignment is best with table-sm and btn-sm are used, but if the btn is different size alignment is thrown off.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<span>No classes</span>
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2" id="drugSearchList">
<thead>
<tr class="my-2">
<th scope="col">Drug Name</th>
<th scope="col">Number</th>
<th scope="col" />
</tr>
</thead>
<tbody>
<tr>
<td>wrapping text here this is a test wrapping text here this is a test</td>
<td>1</td>
<td class="text-end"><a class="btn btn-sm btn-outline-primary" href="#">Edit</a></td>
</tr>
<tr class="border-bottom">
<td>wrapping text here this is a test wrapping text here this is a test</td>
<td>1</td>
<td class="text-end"><a class="btn btn-sm btn-outline-dark disabled">Edit</a></td>
</tr>
</tbody>
</table>
<span>Align-middle on td</span>
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2" id="drugSearchList">
<thead>
<tr class="my-2">
<th scope="col">Drug Name</th>
<th scope="col">Number</th>
<th scope="col" />
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">wrapping text here this is a test wrapping text here this is a test</td>
<td class="align-middle">1</td>
<td class="text-end"><a class="btn btn-sm btn-outline-primary" href="#">Edit</a></td>
</tr>
<tr class="border-bottom">
<td class="align-middle">wrapping text here this is a test wrapping text here this is a test</td>
<td class="align-middle">1</td>
<td class="text-end"><a class="btn btn-sm btn-outline-dark disabled">Edit</a></td>
</tr>
</tbody>
</table>
<span>Align-middle on table</span>
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2 align-middle" id="drugSearchList">
<thead>
<tr class="my-2">
<th scope="col">Drug Name</th>
<th scope="col">Number</th>
<th scope="col" />
</tr>
</thead>
<tbody>
<tr>
<td>wrapping text here this is a test wrapping text here this is a test</td>
<td>1</td>
<td class="text-end"><a class="btn btn-sm btn-outline-primary" href="#">Edit</a></td>
</tr>
<tr class="border-bottom">
<td>wrapping text here this is a test wrapping text here this is a test</td>
<td>1</td>
<td class="text-end"><a class="btn btn-sm btn-outline-dark disabled">Edit</a></td>
</tr>
</tbody>
</table>
<span>Align-middle on td span</span>
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2" id="drugSearchList">
<thead>
<tr class="my-2">
<th scope="col">Drug Name</th>
<th scope="col">Number</th>
<th scope="col" />
</tr>
</thead>
<tbody>
<tr>
<td><span class="align-middle">wrapping text here this is a test wrapping text here this is a test</span></td>
<td><span class="align-middle">1</span></td>
<td class="text-end"><a class="btn btn-sm btn-outline-primary" href="#">Edit</a></td>
</tr>
<tr class="border-bottom">
<td><span class="align-middle">wrapping text here this is a test wrapping text here this is a test</td>
<td><span class="align-middle">1</span></td>
<td class="text-end" class="align-middle"><a class="btn btn-sm btn-outline-dark disabled">Edit</a></td>
</tr>
</tbody>
</table>
Instead of using a span with .align-middle. Just add the align-middle class directly on the td.
I added a bottom border to the last tr to visualize alignment.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2" id="drugSearchList">
<thead>
<tr class="my-2">
<th scope="col">Date</th>
<th scope="col">Drug Name</th>
<th scope="col">Number</th>
<th scope="col" />
</tr>
</thead>
<tbody>
<tr>
<td data-col="Date" class="align-middle">12/14/2022</td>
<td data-col="Drug" class="align-middle">hydroxyurea</td>
<td data-col="Number" class="align-middle">1</td>
<td class="text-end" class="align-middle">
<a class="btn btn-sm btn-outline-primary" href="#">Edit</a>
</td>
</tr>
<tr class="border-bottom">
<td data-col="Date" class="align-middle">12/14/2022</td>
<td data-col="Drug" class="align-middle">doxorubicin</td>
<td data-col="Number" class="align-middle">1</td>
<td class="text-end" class="align-middle">
<span class="btn btn-sm btn-outline-dark disabled">Edit</span>
</td>
</tr>
</tbody>
</table>
please can you help me to fix the design to make data more clear ,i will be very grateful if you help me ,thanks for your answer in advance
this is my css file
table-layout: fixed;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
overflow: hidden;
}
this is my html file
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped" >
<thead>
<tr>
<th class="odd" colspan="4">id</th>
<th class="odd" colspan="4">name</th>
<th *ngIf="isAdmin()" class="odd" colspan="4"> password</th>
<th class="odd" colspan="4">role</th>
<th class="odd" colspan="4"class="corner wideRow">email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<th class="odd" colspan="4" ></th>
<td class="odd" colspan="4" >{{el.id}} </td>
<td class="odd" colspan="4" >{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd" colspan="4">{{el.password}}</td>
<td class="odd" colspan="4" >{{el.role}}</td>
<td class="odd" colspan="4" >{{el.email}}</td>
<td class="odd" colspan="4">
<tr>
<a *ngIf="isAdmin()"
class="btn btn-danger" (click) = "deleteUser(el.id)" >Delete</a>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</tr>
</td>
</tbody>
</table>
</div>
</div>
</div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
this the result ,it's not clear and i didn't khnow how to fixed it
when i add in csstable td { word-break: break-all;
}**
the result
result 2
1.) Having colspan="4" in each cell does not make any sense.
2.) The first (empty) th element in the tbody rows causes the misaligning you wrote about. Erase that to have IDs under the "id" header, names under the "name" header etc.
3.) You need an additional th cell in the header row (at the end) to have the same amount of cells as in the rows below it (above the cells with the nested tables which contain the two buttons).
.table-striped {
width: 100%;
border-collapse: collapse;
}
table td {
border: 1px solid #ddd;
word-break: break-all;
}
<table class="table table-striped">
<thead>
<tr>
<th class="odd">id</th>
<th class="odd">name</th>
<th *ngIf="isAdmin()" class="odd"> password</th>
<th class="odd">role</th>
<th class="odd">email</th>
<th class="odd"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<td class="odd">{{el.id}} </td>
<td class="odd">{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd">{{el.password}}</td>
<td class="odd">{{el.role}}</td>
<td class="odd">{{el.email}}</td>
<td>
<table>
<tr>
<td>
<a *ngIf="isAdmin()" class="btn btn-danger" (click)="deleteUser(el.id)">Delete</a>
</td>
<td>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Add this css
table td {
word-break: break-all;
}
And use this corrected html. Make sure you header columns and body columns are equals.
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th class="odd" colspan="4">id</th>
<th class="odd" colspan="4">name</th>
<th *ngIf="isAdmin()" class="odd" colspan="4"> password</th>
<th class="odd" colspan="4">role</th>
<th class="odd" colspan="4">email</th>
<th class="odd" colspan="4"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<td class="odd" colspan="4">{{el.id}} </td>
<td class="odd" colspan="4">{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd" colspan="4">{{el.password}}</td>
<td class="odd" colspan="4">{{el.role}}</td>
<td class="odd" colspan="4">{{el.email}}</td>
<td>
<table>
<tr>
<td>
<a *ngIf="isAdmin()" class="btn btn-danger" (click)="deleteUser(el.id)">Delete</a>
</td>
<td>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a html table whose headers need to be fixed. I am using bootstrap classes to make html headers fix, but i see many issues with that.
Please find the sample here.
Issues i'm facing are Header is not displayed starting from first column, word wrap is not applied for the columns header or the columns. Please advice. Is there any better way to solve this.
html code:
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped"> <thead>
<tr class="row"><th class="col-md-7">Header1</th><th class="col-md-4">Header2</th><th class="col-md-3">Header3</th><th class="col-md-4">Header4</th></tr>
</thead><tbody>
<tr><td>1111</td><td>33333</td><td>1111</td><td>3333322222222222222222222222222222</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>112222222222222215555555551</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
</tbody> </table>
</div>
1.) The cells in your header tr have Bootstrap classes which add up to a width of 18 columns (7+4+3+4), but one row can only fit 12 columns in the bootstrap grid system.
2.) You write that wordwrap is not applied, but you don't have any CSS rules for wordwrap anywhere.
You're using class .row on one row only :
<tr class="row">
<th class="col-md-7">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
You either use the same class on each row or just delete it and leave the rows without a class.
<tr></tr>
this would fix your issue.
Only simple thing missed is using the same structure (Or CSS classes), I've checked the code from your fiddle and this should work for the scenario you've presented.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped table-scroll">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5443545435354543</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5437665</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5435435443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">68678454</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">786876</td>
<td class="col-md-3">8787876</td>
<td class="col-md-4">6765767</td>
</tr>
<tr class="row">
<td class="col-md-3">7656765</td>
<td class="col-md-4">656456</td>
<td class="col-md-3">116611</td>
<td class="col-md-4">43434</td>
</tr>
<tr class="row">
<td class="col-md-3">43243432434324342</td>
<td class="col-md-4">33344343233</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">4343</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">432434343243243</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">432443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">333333</td>
<td class="col-md-3">111312312123121</td>
<td class="col-md-4">32112</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Okay:
For Word-wrap in continuous text
add " word-break: break-all;" (see the CSS below)
FOR Fixed Header
Refer the 'table-scroll' class in the HTML markup above
AND
Add the following CSS:
.modal-body {
/*max-height: calc(100vh - 210px);*/
height:300px;
width:90%;
overflow: hidden;
word-break: break-all;
}
.table-scroll tbody {
position: absolute;
overflow-y: scroll;
height: 400px;
}
.table-scroll tr {
width: 100%;
table-layout: fixed;
display: inline-table;
}
.table-scroll thead > tr > th {
border: none;
}
repalce this
<tr class ="row" >
with this
<tr>
your updated fiddle http://jsfiddle.net/girish28892/ZcLSE/1431/
I am trying to prepare a simple mark sheet [as an example to demonstrate my requirement]. Am planning to have a collapsible div which will render all the mark details once it is expanded.
<div class="well">
<table class="table table-bordered"
style="background:#fff; margin-bottom:10px;">
<tbody>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_1"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_1">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Physics </td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>2</td>
<td>PQR</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_2"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_2">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chemistry</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
fiddle
But in this approach, when a section is not expanded, the row which encloses the collapsible div appears like a blank row in the table - which is quite misleading.
I am sure this is not the best way to render this sort of details.Would like to know what are the alternate UI options to render these details.
Use this CSS:
td[colspan="3"] {
padding: 0;
}
Fiddle
I'm trying to understand how I can have my th tags that have a class assigned to them called "nosortable" to have its content of that cell be perfectly centered whether its a checkbox or text. I tried applying a padding-right of 0 but that took it all off. Are their any ideas?
<table id="basicTable" class="table table-striped table-bordered responsive">
<thead class="">
<tr>
<th class="nosortable center"><input type="checkbox" id="selectall" /></th>
<th class="center">ID</th>
<th>Name</th>
<th>Email Address</th>
<th>Username</th>
<th>Role</th>
<th>Status</th>
<th class="nosortable center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" name="check[]" class="tablecheck" data-id="1"/></td>
<td class="center">1</td>
<td>My name</td>
<td>myemail#email.com</td>
<td>testuser</td>
<td>Owner</td>
<td>Active</td>
<td class="center">
<a data-original-title="Edit" href="" data-toggle="tooltip" title="" class="tooltips"><i class="fa fa-pencil"></i></a>
<a data-original-title="Delete" href="" data-toggle="tooltip" title="" class="delete-row tooltips"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/xtremer360/cLzj4kL1/
In your stylesheet add the following
table#basicTable th {
text-align: center;
}