I'm trying to create a table with nested products.
I am using the WooCommerce plugin, so I can't change the HTML markup.
As you can see, this works fine with the next table row, for the product that belongs to the one above it. But it does not work for the ones after that. I don't want them to have a border bottom, so it looks like 1 table row.
It's using tc-container-table-product for the main product and tc-associated-table-product for the ones that belong to the main product.
I am using (SCSS with Tailwind CSS), code:
tr.tc-container-table-product {
#apply mb-0;
+ tr:not(.tc-associated-table-product) {
#apply mt-4;
}
&:has(+ .tc-associated-table-product) {
#apply mb-0 !border-b-0 rounded-bl-none rounded-br-none;
}
&:has(+ .tc-associated-table-product):has(+ .tc-associated-table-product) {
#apply mb-0 !border-b-0 rounded-bl-none rounded-br-none;
}
}
The table HTML is:
<table>
<tbody>
<tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo">
</tr>
<tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-container-table-product">
</tr>
<tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-associated-table-product">
</tr>
<tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-container-table-product">
</tr>
<tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-associated-table-product">
</tr>
<tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-associated-table-product">
</tr>
<tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-associated-table-product">
</tr>
<tr>
</tr>
</tbody>
</table>
Any idea what I am doing wrong?
Thanks!
Related
I have some content which does not take up the entire column. so I was trying to postion an image to that side so that it saves some space.
I tried checking for grid layouts or column layout in md but none of it has provided info on how to do it
This is what i am looking for
the code is # here
... thanks
The Markdown table does not support cell merge by default, so you should use HTML table.
And in comment, you said
"Even this time the image took only one row, ..."
in this case just use rowspan.
<table>
<tr>
<td>- Identifying cutomer needs (requirments)</td>
<td rowspan="11">
<img src="https://user-images.githubusercontent.com/74305823/118094261-783e8280-b409-11eb-8f50-8ed0b304fef0.png" width="300"/>
</td>
</tr>
<tr>
<td>- market analysis (requirements)</td>
</tr>
<tr>
<td>- defining goals (requirements)</td>
</tr>
<tr>
<td>- Establishing functions (Prodct concept)</td>
</tr>
<tr>
<td>- Task Specifications (Prodct concept)</td>
</tr>
<tr>
<td>- Conceptualizatoin (Solution concept)</td>
</tr>
<tr>
<td>- Evaluating Alternatives</td>
</tr>
<tr>
<td>- Emnodiment Design</td>
</tr>
<tr>
<td>- Analysis and Optimization</td>
</tr>
<tr>
<td>- Experiment</td>
</tr>
<tr>
<td>- Marketing</td>
</tr>
</table>
EDIT
AS #tarleb said, using <ul>...</ul> tag can be more simple.
<table>
<tr>
<td>
<ul>
<li>Identifying cutomer needs (requirments)</li>
<li>market analysis (requirements)</li>
<li>defining goals (requirements)</li>
<li>Establishing functions (Prodct concept)</li>
<li>Task Specifications (Prodct concept)</li>
<li>Conceptualizatoin (Solution concept)</li>
<li>Evaluating Alternatives</li>
<li>Emnodiment Design</li>
<li>Analysis and Optimization</li>
<li>Experiment</li>
<li>Marketing</li>
</ul>
</td>
<td>
<img src="https://user-images.githubusercontent.com/74305823/118094261-783e8280-b409-11eb-8f50-8ed0b304fef0.png" width="300"/>
</td>
</tr>
</table>
Hi im having a issue with a simple problem. because for some reason i dont find anything wrong with my codes. Seems like my code is not reading my colspan. seems like this problem as been mark as duplicate. but i dont want to specify the width of the table since i want the table to be responsive and i use bootstrap table
<div>
<table class="table table-condensed">
<thead>
<tr class="text-uppercase text-contrail table-dark-head">
<th colspan="3">Spillage</th>
<th>Total</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Material Cost / Kg</td>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
</tr>
<tr>
<td>Spillage at 0.5%</td>
</tr>
</tbody>
</table>
</div>
i put this code inside my template. please see the image for the result. The Total and Remarks should be on the right side. but it end up with balance width.
I have created a table using component nztable from ``ng-zorro`. That table contains a nested table where I want to load data dynamically(REST service call) on click of the expand icon.
I am able to load the data in the nested table but when I expand next row, it is overriding data in the first row with the new result.
As nested table creation is in the loop(ngfor), I am unable to control the data binding to a specific row.
<nz-table #nestedTable [nzData]="displayData" [nzPageSize]="10">
<thead colspan="5">
<tr>
<th nzWidth="4%"nzShowExpand></th>
<th nzWidth="12%">Id</th>
<th nzWidth="10%">Start Time</th>
<th nzWidth="10%">End Time</th>
<th nzWidth="10%">Status</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="nestedTable.data">
<tr>
<td nzShowExpand [(nzExpand)]="data.expand" (click)="getDetails(data)"></td>
<td >{{data.Id}}</td>
<td>{{data.startTime}}</td>
<td>{{data.endTime}}</td>
<td>{{data.status}}</td>
</tr>
<tr [nzExpand]="data.expand">
<td><nz-spin *ngIf="isEventLoading"></nz-spin></td>
<td colspan="9">
<nz-table #innerTable [nzData]="innerTableData" nzSize="middle" [nzShowPagination]="false">
<thead>
<tr>
<th>E ID</th>
<th>S ID</th>
<th>E Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of innerTable.data">
<td>{{data.eID}}</td>
<td>{{data.sID}}</td>
<td>{{data.eType}}</td>
</tr>
</tbody>
</nz-table>
Try to replace this [nzData]="innerTableData" whith your inner collection like this [nzData]="data.childRows".
I got this code:
<th:block th:if="${!#lists.isEmpty(partyInfoByUploaderList)}" th:each="pInfo : ${partyInfoByUploaderList}">
<h4 th:text="${pInfo.getCharName()}"></h4>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th:block th:if="${!#lists.isEmpty(pInfo.getCharColumnTitles())}" th:each="title: ${pInfo.getCharColumnTitles()}">
<td th:text="${title}"></td>
</th:block>
</tr>
</thead>
<tbody>
<tr>
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<td th:text="${val}"></td>
</th:block>
</tr>
</tbody>
</table>
And I got this result:
http://screenshot.ru/6dfbe559f905a17dff44d360b5d13f28
So this code correctly create table head, and dont parse table body.
BTW, after delpoy this code appear at another place:
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<td th:text="${val}"></td>
</th:block>
Web source code in browser:
http://screenshot.ru/9d3fab8030c5ca382ab81094e0c1ca86
Question #2:
Why this code produce TemplateProcessingException error?
P.S. Not enough reputation for images, so just links. Soz
According to Thymeleaf Documentation, <th:block></th:block> should wrap <tr></tr> and not the opposite. So you should try this :
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<tr>
<td th:text="${val}"></td>
</tr>
</th:block>
I am trying to understand how to loop through all entries in a Map in Thymeleaf. I have a domain object being processed by Thymeleaf that contains a Map.
How do I loop through the keys and fetch the values ?
Thanks.
Nevermind... I found it...
<tr th:each="instance : ${analysis.instanceMap}">
<td th:text="${instance.key}">keyvalue</td>
<td th:text="${instance.value.numOfData}">num</td>
</tr>
Thanks.
In case you have a List as the value. For example, when you have a map with key being the category, and value being a list of items pertaining to that category, you can use this:
<table>
<tr th:each="element : ${catsAndItems}">
<td th:text="${element.key}">keyvalue</td>
<table>
<tr th:each="anews : ${element.value}">
<td th:text="${anews.title}">Some name</td>
<td th:text="${anews.description}">Some name</td>
<td th:text="${anews.url}">Some name</td>
<td th:text="${anews.logo}">Some name</td>
<td th:text="${anews.collectionDate}">Some name</td>
</tr>
</table>
</tr>
</table>