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% }
Related
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>
Need help with this:
So far with my current knowledge, I was able to design till here but it looks wrong and something is missing.
My code -
<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
<table border=2cellspacing=4cellpadding=4 border color dark="red" border color light="blue"
align="center">
<caption>List of Books</caption>
<tr>
<th row span=2align="center">ItemNo</th>
<th row span=2align="center">ItemName</th>
<th align="center"colspan=2>Price</th>
</tr>
<tr>
<th align="center">Rs.</th>
<th align="center">Paise</th>
</tr>
In HTML, you need to enclose the values for the attributes in doublequotes, no matter what it is (integer, string, functions, etc.) i.e.
<tr rowspan="3"></tr>
<span class="short"></span>
<button onclick="jump()"></button>
In the table, there's no such attribute called row span and col span. It's rowspan and colspan.
If you want to set the padding that's same across all cells in the table, you can simply add it to <style> and use CSS for it. If all cells have different styles, you can also apply the attribute style for each th and td.
<style>
td, th {
padding: 10px;
}
</style>
<table border="2">
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Price</th>
</tr>
<tr>
<th>Rs.</th>
<th>Paise</th>
</tr>
</table>
Here is your code:
<html>
<head>
</head>
<body>
<table align="center" border="1" cellspacing="0">
<caption>List of Books</caption>
<tr>
<th style="padding: 10px" rowspan="2">ItemNo</th>
<th style="padding: 10px" rowspan="2">ItemName</th>
<th style="padding: 10px" colspan="2">Price</th>
</tr>
<tr>
<td style="padding: 10px">Rs.</td>
<td style="padding: 10px">Paise</td>
</tr>
<tr>
<td style="padding: 10px">1</td>
<td style="padding: 10px">Programming in Python</td>
<td style="padding: 10px">500</td>
<td style="padding: 10px">50</td>
</tr>
<tr>
<td style="padding: 10px">2</td>
<td style="padding: 10px">Programming in Java 30</td>
<td style="padding: 10px">345</td>
<td style="padding: 10px">00</td>
</tr>
</table>
</body>
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 bootstrap table which has multiple rows. I would like to split the cells into different section, I am able to split the row Split-1 but I am confused how to split the Split-1 into Split-2. I am trying to achieve Split-2 using rowspan but for some reason its getting messed up. Can someone please help me.
<table class="table table-bordered">
<tbody>
<tr>
<td rowspan="2" style="background-color: #a854a8;text-align: center;"> MAIN FIELD </td>
<td > TIME-1 </td>
<td>
<input type="datetime-local" class="form-control" ng-model="formdata.time" id="time" placeholder="Time 2">
</td>
</tr>
<tr>
<td style="background-color: #eedded;width: 10%;"> TIME-2 </td>
<td>
<input type="datetime-local" class="form-control" ng-model="formdata.time2" id="time2" placeholder="Time2">
</td>
</tr>
</tbody>
</table>
You were close... snippet below should help:
th {
background-color: lightpink;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<table class="table table-bordered">
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td rowspan="4" style="background-color: #a854a8;text-align: center;">Main field</td>
<td rowspan="2" style="background-color: #eedded;width: 10%;">Time1 split 1</td>
<td>split-2 result</td>
</tr>
<tr>
<td>split-2 result</td>
</tr>
<tr>
<td rowspan="2" style="background-color: #eedded;width: 10%;">Time2 split 1</td>
<td>split-2 result</td>
</tr>
<tr>
<td>split-2 result</td>
</tr>
</table>
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