Am having trouble nesting one table inside another:
I want the inner tables to span across the entire width of the outer table. Here is the generated HTML:
<table class="table table-bordered table-striped">
<tr><td align="center">4 laptops were not added because they lacked unique identifiers.</td></tr> <tr><td align="center">2 laptops were not added because they already exist in the database: </td></tr><tr><td>
<table><th>Hostname</th><th>Asset Tag</th><th>Serial</th>
<tr>
<td></td>
<td></td>
<td>4646466</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4646467</td>
</tr>
</table></td></tr>
<tr><td align="center">2 laptops were added to the database: </td></tr><tr><td>
<table><th>Hostname</th><th>Asset Tag</th><th>Serial</th>
<tr>
<td></td>
<td></td>
<td>4646468</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4646469</td>
</tr>
</table></td></tr>
</table>
Have a look
<table class="table table-bordered table-striped" border="1">
<tr><td align="center">4 laptops were not added because they lacked unique identifiers.</td></tr> <tr><td align="center">2 laptops were not added because they already exist in the database: </td></tr><tr><td>
<table border="1" style="width:100%;"><th>Hostname</th><th>Asset Tag</th><th>Serial</th>
<tr>
<td></td>
<td></td>
<td>4646466</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4646467</td>
</tr>
</table></td></tr>
<tr><td align="center">2 laptops were added to the database: </td></tr><tr><td>
<table><th>Hostname</th><th>Asset Tag</th><th>Serial</th>
<tr>
<td></td>
<td></td>
<td>4646468</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4646469</td>
</tr>
</table></td></tr>
</table>
Just add width attribute
width = '100%'
to the inner table. It will make it spread all over the width of the containing cell.
DEMO
Related
I am getting nTd is undefined when using TableData of bootstrap. I have already read in many forums that it's because of not having the same number of td's and th's in the header and body elements.
But I think it should work. I have counted the number of tds and ths and they are the same.
Here is my code:
<table id="searchResultTable">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<th:block th:each="element, iterStat : ${searchResult}">
<tr>
<td class="underline font-weight-bold" colspan="3"
data-toggle="collapse" th:data-target="|.demo${iterStat.count}|"
th:text="${element.key}" />
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr th:id="'demo'+ ${iterStat.index}"
th:class="|accordian-body collapse demo${iterStat.count}|"
th:each="anews : ${element.value}">
<td class="boldanditalic" th:text="${anews.getDate()}">Date</td>
<td class="boldanditalic" th:text="${anews.user.getFullname()}">
writer</td>
<td th:if="${!#strings.equals(anews.fp,'')}"
th:text="'$'+${anews.fp}">fp</td>
<td th:if="${!#strings.equals(anews.sep,'')}"
th:text="'$'+${anews.sep}">sep</td>
<td th:if="${!#strings.equals(anews.tp,'')}"
th:text="'$'+${anews.tp}">tp</td>
<td th:if="${!#strings.equals(anews.fop,'')}"
th:text="'$'+${anews.fop}">fop</td>
<td th:if="${!#strings.equals(anews.fp,'')}"
th:text="'$'+${anews.fp}">SP</td>
<td th:if="${!#strings.equals(anews.sip,'')}"
th:text="'$'+${anews.sip}">SP</td>
<td th:if="${!#strings.equals(anews.sp,'')}"
th:text="'$'+${anews.sp}">SP</td>
</tr>
</th:block>
</tbody>
</table>
I even tried to add the <th> block in the header. But it didn't work.
I would appreciate your help.
Update:
I have added the following code in the header section:
<script>
$(document).ready(function() {
$('#searchResultTable').dataTable();
});
</script>
Here you can find the links and scripts in the header:
<script
src="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"></script>
<link
href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link
href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"
rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
You can find the screenshot of the result here:
Update 2: If I remove the th:block section and add some simple elements, it works.
Inside the <thead> row you have 9 cells, let's assume this is what you want;
Inside <tbody> you have 2 rows:
The first row has 9 cells, but the first cell has colspan=3, which will give you 11 cells in total according to your <thead> row. This should be fixed in either remove 2 empty cells or remove colspan.
The second row has 9 cells, but the last 7 cells are conditional and you may not have them at all or have some of them. To maintain the proper structure of the table you should remove the condition from cells and always have them.
Basically your code may look like ... (I might miss something as I didn't try this code, but you'll get an idea)
<table id="searchResultTable">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<th:block th:each="element, iterStat : ${searchResult}">
<tr>
<td class="underline font-weight-bold" colspan="3"
data-toggle="collapse" th:data-target="|.demo${iterStat.count}|"
th:text="${element.key}"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr th:id="'demo'+ ${iterStat.index}"
th:class="|accordian-body collapse demo${iterStat.count}|"
th:each="anews : ${element.value}">
<td class="boldanditalic" th:text="${anews.getDate()}">Date</td>
<td class="boldanditalic" th:text="${anews.user.getFullname()}">
writer</td>
<td th:text="${!#strings.equals(anews.fp,'')}? ${'$'+ anews.fp} : ''">fp</td>
<td th:text="${!#strings.equals(anews.sep,'')}? ${'$'+ anews.sep} : ''">sep</td>
<td th:text="${!#strings.equals(anews.tp,'')}? ${'$'+ anews.tp} : ''">tp</td>
<td th:text="${!#strings.equals(anews.fop,'')}? ${'$'+ anews.fop} : ''">fop</td>
<td th:text="${!#strings.equals(anews.sp,'')}? ${'$'+ anews.sp} : ''">sp</td>
<td th:text="${!#strings.equals(anews.sip,'')}? ${'$'+ anews.sip} : ''">sip</td>
<td th:text="${!#strings.equals(anews.fp,'')}? ${'$'+ anews.fp} : ''">fp</td>
</tr>
</th:block>
</tbody>
</table>
Say i have 2 different tables using bootstrap:
<table class="table">
<tbody>
<tr>
<td>Name:</td>
<td></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td>Favorites:</td>
<td></td>
</tr>
</tbody>
</table>
I'm using bootstrap, how can i make it so that both tables are aligned? Both tables only have 2 columns each. I would like the 2nd column to match vertically.
It's so random how wide they are.
So lets say the first table's 2nd column is aligned at the center of the page
but the 2nd table's 2nd column is so far right of the page.
It looks like this
You can place both tables in a row, and then place each of the tables in their own container, giving each a class of col-6
using Bootstrap
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
or you can use CSS
Nevermind, i solved it. Only needed to add Style attribute inside my Table divisions.
<table class="table">
<tbody>
<tr>
<td style="width:50%;">Name:</td>
<td></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td style="width:50%;">Favorites:</td>
<td></td>
</tr>
</tbody>
</table>
now the 2nd column where all my variables i print out will align with each other.
I want to create table with main section and subsections like that
I tried
<html>
<body>
<table style="width:100%">
<tr>
<td rowspan="3">section</td>
<td rowspan="3">subsection1</td>
<td rowspan="2">subsection1</td>
<td rowspan="1">subsection1</td>
</tr>
<tr>
<td>text1</td>
</tr>
<tr>
<td>text2</td>
</tr>
<tr>
<td>text3</td>
</tr>
...
</table>
</body>
</html>
but this code dont create dont create subsections. Surrounding subsection1 with also dont create subsections.
The rowspan attribute indicates the number of rows a cell should take up. There are 6 rows total in your table, so if you want a cell to span to the last row of the table, you specify rowspan="6". Note that the rowspan values should sum up to the same number for each column, the default value being 1.
<table style="width:100%">
<tr>
<td rowspan="6">section</td>
<td rowspan="3">subsection1</td>
<td>text1</td>
</tr>
<tr>
<td>text2</td>
</tr>
<tr>
<td>text3</td>
</tr>
<tr>
<td rowspan="2">subsection2</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
</tr>
<tr>
<td rowspan="1">subsection3</td>
<td>...</td>
</tr>
</table>
See this JSFiddle
I currently have a code that looks something like this:
<table border="1">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I want to alter it so the format looks something like this:
However, it seems like whatever I try, just does not work out. How can I alter my code to make my table look like the one in the image? The CSS, sizes, and shapes don't matter, I'm just struggling to get the correct template.
Try using rowspan:
<table border="1">
<tbody>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
What you're missing is a rowspan tag. Insert the following just after the tbody tag:
<tr>
<td rowspan="2"></td>
</tr>
I want to draw a table in following format:
But it's not displaying properly. It's inserting some rows after the last column.
How can I fix the HTML?
<tr>
<th rowspan="2">Client ID</th>
<th rowspan="2">Trade ID</th>
<th rowspan="2">Symbol</th>
<th rowspan="2">Average Price</th>
<th colspan="3">DTD</th>
<th colspan="3">MTD</th>
<th rowspan="2">Net YTD</th>
</tr>
<tr>
<td><core:out value="${orderBookData.clientID}" /><br></td>
<td><core:out value="${orderBookData.tradeID}" /></td>
<td><core:out value="${orderBookData.symbol}" /></td>
<td><core:out value="${orderBookData.averagePrice}" /></td>
<td><core:out value="${orderBookData.DTD}" /></td>
<td><core:out value="${orderBookData.MTD}" /></td>
<td><core:out value="${orderBookData.YTD}" /></td>
<td><core:out value="${orderBookData.DTD}" /></td>
<td><core:out value="${orderBookData.MTD}" /></td>
<td><core:out value="${orderBookData.YTD}" /></td>
<td><core:out value="${orderBookData.YTD}" /></td>
</tr>
Your header row is perfectly accurate. However, you need to account for the extra rows and columns with your subsequent <td> tags. Since columns 1-4 and 7 are rowspan="2", you need a second <tr> with two <td> tags to account for the extra cells needed in columns 5-6. Further, since you want three cells each under columns 5-6, you need to triple this number. Thus six would be needed:
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
All subsequent rows below that will need 11 <td> tags, since you must account for all seven columns plus the four extra cells.
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
JS Fiddle: http://jsfiddle.net/Aj5k7/2/
Tutorial on the rowspan and colspan attributes: http://www.tizag.com/htmlT/tables.php/