I have one HTML table which I have kept in bootstrap's accordion, I am taking the input from user, whenever input is too long table is getting outside accordion. How can I set width the fixed, and let it expand vertically.
<table id="recordTable" class="table table-bordered table-striped">
<thead>
<tr>
<th class="col-md-1">Question Number</th>
<th class="col-md-6">Question Text</th>
<th class="col-md-3">upload Document(if any)</th>
<th class="col-md-1">Document uploaded?</th>
<th class="col-md-1">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ques_id col-md-1">12 </td>
<td class="ques_text col-md-6">asd</td>
<td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
<td class="col-md-1">delete</td>
</tr>
<tr>
<td class="ques_id col-md-1">14 </td>
<td class="ques_text col-md-6">asd</td>
<td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
<td class="col-md-1">delete</td>
</tr><tr><td class="ques_id">15</td><td class="ques_text">sdfdfgdfgaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td><td class="fileuploadSuccess"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td><td>delete</td></tr>
</tbody>
</table>
Here is screenshot of the image.
jsfiddle link: https://jsfiddle.net/govi20/obnpjt7h/
add this property word-break: break-all; to td tag
another way add class to table outer element table-responsive
<div class="table-responsive">
<table class="table table-bordered table-striped">
...
</table>
</div>
https://jsfiddle.net/obnpjt7h/1/
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>
Why bootstrap responsive table is not working with dir-paginate.
I have created a responsive grid HTML table by using bootstrap which is working with hard-coded data, but when my angular developer colleague used some 'dir-paginate' for retrieving data from the database then my responsive design code is not working when minimizing the browser shorter.
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<tr>
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I think you are using the directive at the wrong Position. You want to repeat the <tr>-element instead of the <tbody>-element.
For more Information look at this answer: https://stackoverflow.com/a/34392061/7225524
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I am trying to make a table with checkboxes on every row of the table.
I got an example(Code Example link), but I am not being able to get it done. I do not want to use the "data-url" as a source of the table. Except that, everything is accordingly with what I need.
I want to feed the "tbody" by myself.
Here is the example I am following: Code Example
What I want to accomplish:
<tbody>
<tr>
<!-- I do not know what to put over here in order to get it working-->
<td data-field="state" data-checkbox="true"></th>
<td>Foo</td>
<td>666</td>
<td>6969</td>
<td>Let there be rock</td>
</tr>
</tbody>
<!-- UPDATING CODE! -->
<table data-toggle="table" data-click-to-select="true" class="table">
<thead>
<tr>
<th class="bs-checkbox " data-field="state">
<div class="th-inner">
<input name="btSelectAll" class="selectall" type="checkbox">
</div>
<div class="fht-cell"></div>
</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">526</td> <td style="">122</td>
<td style="">Huehuehue</td>
</tr>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">528</td> <td style="">122</td>
<td style="">huehuheheuhe</td>
</tr>
</tbody>
</table>
UPDATE NOTES
Now I can feed the "tbody" by myself (thanks to #Adriano Silva), but the "select all" checkbox is not working.
DONE
Example of the solution given by #AdrianoSilva:
JSFiddle Example
You can insert a row as example below
<table data-toggle="table" data-click-to-select="true" data-url="none">
<thead>
<tr>
<th class="bs-checkbox " data-field="state">
<div class="th-inner">
<input name="btSelectAll" type="checkbox">
</div>
<div class="fht-cell"></div>
</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">526</td> <td style="">122</td>
<td style="">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)</td>
</tr>
</tbody>
</table>
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
in my html i wanna use "th:unless". i wanna compare two coming variable,if any one match with other, i want to hide the button in that raw.
here is my code..
Art-in-Nisantasi-Id
Art-in-Nisantasi-Text
Art-in-Nisantasi-Url
Art-in-Nisantasi-Coordinate
<h3>All Contents</h3>
<table border="1">
<tr align="left">
<th style="width: 20px;">Art-in-Nisantasi-Id</th>
<th style="width: 100px;">Art-in-Nisantasi-Text</th>
<th style="width: 50px;">Art-in-Nisantasi-Url</th>
<th style="width: 50px;">Art-in-Nisantasi-Coordinate</th>
</tr>
<tr th:each="contentType:${contentTypes}">
<td th:text="${contentType.art_in_nisantasi_id}"></td>
<td th:text="${contentType.art_in_nisantasi_text}"></td>
<td th:text="${contentType.art_in_nisantasi_url}"></td>
<td th:text="${contentType.art_in_nisantasi_coordinate}"></td>
</tr>
<div>
<td
th:unless="${contentType.art_in_nisantasi_id}+'='+${selectedContent.art_in_nisantasi_id}"></td>
<td th:attr="data-id=${contentType.art_in_nisantasi_id}">
<button type="button" class="action-addButton" onclick="show">Ekle</button>
</td>
</div>
</table>
try this way :
<td th:unless="${contentType.art_in_nisantasi_id == selectedContent.art_in_nisantasi_id}"></td>
this td element will be produced or created in dom when both are not equal