I have a table with fields having images and links. But it gives code instead of rendering it.
<table id="table"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-show-export="true"
data-show-refresh="true"
data-show-toggle="true"
data-pagination="true"
data-toolbar="#toolbar"
class="table-responsive">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="prenom" data-filter-control="input" data-sortable="true">Title</th>
<th data-field="date" data-filter-control="select" data-sortable="true">Price</th>
<th data-field="examen" data-filter-control="select" data-sortable="true">Image</th>
<th data-field="note" data-sortable="true">Link</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
<td>Maths Tution</td>
<td>$20</td>
<td><img src="https://i.imgur.com/0GoaYKd.jpg" height="100" width="100"></td>
<td>Go</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td>
<td>Milk</td>
<td>$5</td>
<td><img src="https://i.imgur.com/2ZOroMI.jpg" height="100" width="100"></td>
<td>Go</td>
</tr>
</tbody>
</table>
</div>
Here is the link to the website, https://www.monsoonmalabar.com/aggregate_search
How to render the html here?
Bootstrap Table escapes HTML tags. Add data-escape="false" in your table tag.
https://bootstrap-table.com/docs/api/table-options/#escape
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered HTML Table</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table
id="table"
data-toggle="table"
data-search="true"
data-escape="false"
data-filter-control="true"
data-show-export="true"
data-show-refresh="true"
data-show-toggle="true"
data-pagination="true"
data-toolbar="#toolbar"
class="table-responsive"
style="width: 100%;"
>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th
data-field="prenom"
data-filter-control="input"
data-sortable="true"
>
Title
</th>
<th
data-field="date"
data-filter-control="select"
data-sortable="true"
>
Price
</th>
<th
data-field="examen"
data-filter-control="select"
data-sortable="true"
>
Image
</th>
<th data-field="note" data-sortable="true">Link</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox">
<input data-index="0" name="btSelectItem" type="checkbox" />
</td>
<td>Maths Tution</td>
<td>$20</td>
<td>
<img
src="https://i.imgur.com/0GoaYKd.jpg"
height="100"
width="100"
/>
</td>
<td>
<a href="https://monsoonmalabar.com/sonyshop/other/product-13/"
>Go</a
>
</td>
</tr>
<tr>
<td class="bs-checkbox">
<input data-index="1" name="btSelectItem" type="checkbox" />
</td>
<td>Milk</td>
<td>$5</td>
<td>
<img
src="https://i.imgur.com/2ZOroMI.jpg"
height="100"
width="100"
/>
</td>
<td>
<a
href="https://monsoonmalabar.com/sonyshop/test_category_2/product-6/"
>Go</a
>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I want to insert a full width row as shown in the below image by Arrow
I have tried colspan, rowspan but did not work for me so removed from question (otherwise question will mess up).
here is what i have tried: https://jsfiddle.net/eabangalore/y3Lt470z/16/
table td {
padding: 5px;
}
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
</tbody>
</table>
Qusetion: i want to add a full-width row as shown by arrow in red color area (above image)
Note: i cannot change table into divs as i'm working on maintenance project.
You looking for this table structure. You have to use once rowspan and once colspan.
<table width="500px" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">1</th>
<th class="">2</th>
<th class="">3</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">a</th>
<th class="">b</th>
<th class="">c</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
</table>
Small Note: use instead inline style classes.
I have a table in html and want to apply custom width to each header of table. But unfortunately it's not applying. I have bootstrap4 integrated in my html.
Here is my full html table code
<div class="row">
<div class="col-12">
<table class="table table-bordered">
<thead>
<tr>
<th class="user-profile-th" style="width:10%;">
<label class="container-checkbox"><input class="site-checkbox "
type="checkbox" ><span
class="checkmark-checkbox"></span></label></th>
<th class="user-profile-th brand" style="width:20%;">Brand</th>
<th class="user-profile-th link-code" style="width:40%;">Link/Code</th>
<th class="user-profile-th" style="width:15%;">Clicks</th>
<th class="user-profile-th" id="status" style="width:15%;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox"
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>ClassPass</td>
<td class="refrl">
www.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pk
</td>
<td>0</td>
<td>
<div class="tag-cstm rejected"> Rejected </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox"
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>Fave</td>
<td class="refrl">www.yoyo.com</td>
<td>0</td>
<td>
<div class="tag-cstm rejected"> Rejected </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox "
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>artificial inteliggence</td>
<td class="refrl">www.xyxx.com</td>
<td>0</td>
<td>
<div class="tag-cstm approved"> Approved </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox "
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>polymorphism</td>
<td class="refrl">www.oopconcepts.com</td>
<td>0</td>
<td>
<div class="tag-cstm pending"> Pending </div>
</td>
</tr>
</tbody>
</table>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
</div>
Here is my full code jsfiddle link
Why custom widths are not applying?
To give custom width use style="width: 2000px;".
You have not used proper bootstrap classes...
Take a look at https://getbootstrap.com/docs/4.0/content/tables/ .
Check this code:
<table class="table">
<thead class="thead-dark">
<tr>
<th style="width: 2000px;" scope="col">#</th>
<th scope="col">First</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
</tbody>
Check out the image Here
Check out the Live code here: https://codepen.io/manaskhandelwal1/pen/WNvoVeg
I have a table html with alternate input and checkbox.
My problems is when I want to browse my table with key tab.
When the focus is on checkbox the next tab is not the next cells but the next checkbox.
This is my code:
<form class="tabledit-form">
<table id="table" class=" table-striped">
<thead>
<tr>
<th class="head-num"><div><span>N°</span></div></th>
<th class="head-ba"><div><span>Ba</span></div></th>
<th class="head-num2"><div><span>N2°</span></div></th>
<th class="head-ba2"><div><span>Ba2</span></div></th>
<th class="head-num3"><div><span>N3°</span></div></th>
<th class="head-ba3"><div><span>Ba3</span></div></th>
</tr>
</thead>
<tbody>
{% for i in nb_lines %}
<tr class="line-{{forloop.counter}}">
<td id="lg-{{forloop.counter}}-col-1" tabindex="1"></td>
<td id="lg-{{forloop.counter}}-col-2" tabindex="2"><input type="checkbox" name="ba-1-lg-{{forloop.counter}}" /></td>
<td id="lg-{{forloop.counter}}-col-3" tabindex="3"></td>
<td id="lg-{{forloop.counter}}-col-4" tabindex="4"><input type="checkbox" name="ba-2-lg-{{forloop.counter}}" /></td>
<td id="lg-{{forloop.counter}}-col-5" tabindex="5"></td>
<td id="lg-{{forloop.counter}}-col-6" tabindex="6"><input type="checkbox" name="ba-3-lg-{{forloop.counter}}" /></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
First of all try not to use tabindex>0 it is not recommended.
Read this for a better understading of tabindex
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
See this example i have made:
<table>
<thead>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th>Cell 4</th>
<th>Cell 5</th>
</tr>
</thead>
<tbody>
<tr>
<td tabindex="0"><input type="checkbox"/></td>
<td tabindex="0">Col</td>
<td tabindex="0"><input type="checkbox"/></td>
<td tabindex="0">Col</td>
<td tabindex="0"><input type="checkbox"/></td>
</tr>
</tbody>
</table>
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>
We have a strange situation where in html table which is 100% and scrollable TBODY which is
100% width also, it is not expanding the way we want ONLY in situation when we have small amount of rows( so we dont need scrolling ).
Note: it is very important to me to work with %.
I have the same classes applied to all TDs and i expect to see all of them with same width.
The result is the following. http://jsfiddle.net/FqDfy/
<div id="pnlData">
<table class="sortable filterable TF" id="htmlTabela" style="display: block;">
<thead class="fixedContent">
<tr class="fltrow">
<td class="date-width">
<input type="text" id="flt0_htmlTabela" ct="0" class="flt">
</td>
<td class="time-width">
<input type="text" id="flt1_htmlTabela" ct="1" class="flt">
</td>
<td class="alarm-width">
<input type="text" id="flt2_htmlTabela" ct="2" class="flt">
</td>
<td class="priority-width">
<input type="text" id="flt3_htmlTabela" ct="3" class="flt">
</td>
<td class="stName-width">
<input type="text" id="flt4_htmlTabela" ct="4" class="flt">
</td>
<td class="ptName-width">
<input type="text" id="flt5_htmlTabela" ct="5" class="flt">
</td>
<td class="desc-width">
<input type="text" id="flt6_htmlTabela" ct="6" class="flt">
</td>
<td class="zone-width">
<input type="text" id="flt7_htmlTabela" ct="7" class="flt">
</td>
</tr>
<tr>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable date-width" id="header-date" table-sortable="ignorecase">Date</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable time-width" id="cell-time" table-sortable="ignorecase">Time</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable alarm-width" id="cell-alarm" table-sortable="ignorecase">Alarm</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable priority-width" id="cell-priority" table-sortable="ignorecase">Priority</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class=" stName-width header-clickable" id="cell-stationName" table-sortable="ignorecase">StationName</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable ptName-width" id="cell-pointName" table-sortable="ignorecase">PointName</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable desc-width" id="cell-description" table-sortable="ignorecase">Description</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable zone-width" id="cell-zname" table-sortable="ignorecase">Zone Name</th>
</tr>
<tr>
<th class="fltHolder" id="fltHolder0"> </th>
<th class="fltHolder" id="fltHolder1"> </th>
<th class="fltHolder" id="fltHolder2"> </th>
<th class="fltHolder" id="fltHolder3"> </th>
<th class="fltHolder" id="fltHolder4"> </th>
<th class="fltHolder" id="fltHolder5"> </th>
<th class="fltHolder" id="fltHolder6"> </th>
</tr>
</thead>
<tbody class="scrollContent" style="height: 150.5px;">
<tr style="color:Gold;">
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="date-width">13 Sep 2013</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="time-width">15:05:15.947000</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="alarm-width">*</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="priority-width">3</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="stName-width">SYS$</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="ptName-width">SCADA</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="desc-width">OmsLinesections file 80 percent full</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="zone-width" id="cell-zname">AllZones</td>
</tr>
<tr style="color:Gold;">
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="date-width">12 Sep 2013</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="time-width">17:12:15.080000</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="alarm-width">*</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="priority-width">3</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="stName-width">SYS$</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="ptName-width">SCADA</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="desc-width">OmsLinesections file 80 percent full</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="zone-width" id="cell-zname">AllZones</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
If you are ok with the below result then just remove all display:block..
You should put tbody.scrollContent >tr
{
width:100%;
display:table;
}
in your css
There are so many useless CSS classes and inline styling you should just start with a basic test case and work towards your goal.
Here is your table cleaned up for the most part. BTW the orange is difficult to read without a darker background-color.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Table</title>
<style type="text/css">
/*<![CDATA[*/
.width_100 {width: 100%;}
table tfoot, table thead {background-color: #9E3232;}
table {border-collapse: collapse;}
table tbody td {background-color: #bbb; color: #ffd700;}
/*]]>*/
</style>
</head>
<body>
<table class="width_100">
<thead>
<tr><th>Date</th><th>Time</th><th>Alarm</th><th>Priority</th><th>StationName</th><th>PointName</th><th>Description</th><th>Zone Name</th></tr>
</thead>
<tbody>
<tr><td>13 Sep 2013</td><td>15:05:15.947000</td><td>*</td><td>3</td><td>SCADA</td><td>OmsLinesections file 80 percent full</td><td>AllZones</td></tr>
<tr><td>12 Sep 2013</td><td>17:12:15.080000</td><td>*</td><td>3</td><td>SYS$</td><td>SCADA</td><td>OmsLinesections file 80 percent full</td><td>AllZones</td></tr>
</tbody>
<tfoot><tr><th>Date</th><th>Time</th><th>Alarm</th><th>Priority</th><th>StationName</th><th>PointName</th><th>Description</th><th>Zone Name</th></tr></tfoot>
</table>
</body>
</html>
The browsers add the tbody tag if it is not in Your code.
- This worked for me to make the tds extend fully within the table:
tbody { display:table;width:100% }