I want to fuse a cell with the cell of the previous row in a shopping cart.
Here is what I want to do
Table rowspan
No problem for the first and last columns, I just use rowspan on cell 1 and 4 then hide cell 5 and 8, but how can I do the same for cells 3 and 7 ? I know I could use Javascript and appendTo the content of the cell 7 into the cell 3 then use rowspan on cell 3, but I'm wondering if it is possible to do that only with CSS.
My code looks like that right now :
<table>
<tr>
<td rowspan="2">Image</td>
<td>Title</td>
<td></td>
<td rowspan="2">Price</td>
</tr>
<tr>
<td>Description</td>
<td>Delete</td>
</tr>
</table>
I want the cell "Delete" to fill both rows, and I can't swap its content with the empty cell on the above TR.
Related
I want to set fixed width to column and if table data is large then that column should be a scroll-able and if screen resolutions get changed then table also get scroll-able.
Example :
Name Surname Salary
sam jdfgdhfgdfgudfgiuudifghdfgjjdfhgjkhdfghkjdhfgjkhdfkjgkjdfhgk 5555
In above example Surname is large then table and column is not get responsive.
How to set fixed length for column with scroll-able property?
Table and column also be responsive to get executable in other screen resolutions.
Wrap the content of the <tbody> in a scrollable <div> :
html:
...
<tbody>
<tr>
<td>
<div class="scroll-table">
<table>
<tr>
<td>Sam</td>
</tr>
<tr>
<td>jdfgdhfgdfgudfgiuudifghdfgjjdfhgjkhdfghkjdhfgjkhdfkjgkjdfhgk </td>
</tr>
<tr>
<td>5555</td>
</tr>
...
css
.scroll-table{
overflow:scroll;
}
This question already has answers here:
Why doesn't table > tr > td work when using the child selector?
(2 answers)
Closed 8 years ago.
I can't figure out why I can't achieve selecting rows that are direct children of a table (given that other sub-table are included in TD's of main table, I just want direct children rows, not rows of descendant tables).
Here the remaining structure after radical simplification (also see jsfiddle here):
<body>
<table>
<tr>
<td>TR 1 - TD 1 </td>
<td>TR 1 - TD 2 </td>
</tr>
<tr>
<td>TR 2 - TD 1</td>
<td>
<table>
<tr>
<td>Table 2 - A </td>
<td>Table 2 - B </td>
</tr>
<tr>
<td>Table 2 - C</td>
<td>Table 2 - D</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I'm not able to select rows that are direct children of the main table:
- body>table tr {background-color:lightgray;} logically selects all rows of table and sub-table
- body>table tr tr {color:blue;} logically selects all rows of sub-table only
- but body>table>tr {color:red;} doesn't select anything at all (no red text to be seen)
What am I doing wrong? On the structure? On the selectors?
->jsfiddle
a tbody element may be automatically inserted when it is not in the markup (the side effect is that a table > tr selector could fail), so try to change last rule with body > table > tbody tr.
example: http://jsfiddle.net/wn84hotm/2/
How can I use Chameleon or Zope Page Templates to easily create CSS zebra striping? I want to add odd and even classes to each row in a table, but using a condition with repeat/name/odd or repeat/name/even looks rather verbose even with a conditional expression:
<table>
<tr tal:repeat="row rows"
tal:attributes="class python:repeat['row'].odd and 'odd' or 'even'">
<td tal:repeat="col row" tal:content="col">column text text</td>
</tr>
</table>
This gets especially tedious if you have multiple classes to calculate.
The Zope Page Templates implementation for the repeat variable has an under-documented extra parameter, parity, than gives you the string 'odd' or 'even', alternating between iterations:
<table>
<tr tal:repeat="row rows"
tal:attributes="class repeat/row/parity">
<td tal:repeat="col row" tal:content="col">column text text</td>
</tr>
</table>
This is also much easier to interpolate into a string expression:
tal:attributes="class string:striped ${row/class} ${repeat/row/parity}"
This works in Chameleon as well.
How to select table rows excluding first row. Number of table rows could vary.
Here is example:
<table id="grdVerzekeringen" >
<tr>
<th>First name</th><th>Last name</th>
</tr>
<tr>
<td>Pera</td><td>Peric</td>
</tr>
<tr>
<td>Mika</td><td>Mikic</td>
</tr>
<tr>
<td>Zika</td><td>Zikic</td>
</tr>
</table>
In this example I want to select table rows that have actual data not header data. I could use css selectors or XPath.
If the header row uses th, you are lucky. Just use the following XPath expression:
table[#id="grdVerzekeringen"]/tr[td]
If the header uses td as well, you can use the position() function:
table[#id="..."]/tr[position()>1]
My question is pretty basic but cannot find an answer on Google. I do wonder if I missed something about the ice:column component.
I do use code like :
<ice:panelGrid columns="3">
<ice:column style="background-color: yellow;">
<ice:outputText value="..." />
</ice:column>
<ice:column>
// row content
</ice:column>
<ice:column>
// row content
</ice:column>
// other rows
</ice:panelGrid>
It seems that the column component has a style and styleClass attribute, however nothing is ever rendered in the HTML.
How do you apply a style to a perticular cell of a table with IceFaces ?
Thanks in advance for the answer.
Like as standard JSF <h:panelGrid> the <ice:panelGrid> has a columnClasses attribute which allows you to specify a comma-separated list of column classes which are to be applied subsequently on the columns. Also, in standard JSF <h:panelGrid>, the <h:column> is not supported. This is only suppored in <h:dataTable>. Instead, every direct child of <h:panelGrid> is treated as a single column, which can be just <h:outputText> or <h:panelGroup> if you have multiple components which need to go in a single column.
So, this should do:
<ice:panelGrid columns="3" columnClasses="col1,col2,col3">
<ice:panelGroup>row 1 col 1</ice:panelGroup>
<ice:panelGroup>row 1 col 2</ice:panelGroup>
<ice:panelGroup>row 1 col 3</ice:panelGroup>
<ice:panelGroup>row 2 col 1</ice:panelGroup>
<ice:panelGroup>row 2 col 2</ice:panelGroup>
<ice:panelGroup>row 2 col 3</ice:panelGroup>
...
</ice:panelGrid>
which will generate
<table>
<tbody>
<tr>
<td class="col1">row 1 col 1</td>
<td class="col2">row 1 col 2</td>
<td class="col3">row 1 col 3</td>
</tr>
<tr>
<td class="col1">row 2 col 1</td>
<td class="col2">row 2 col 2</td>
<td class="col3">row 2 col 3</td>
</tr>
...
</tbody>
</table>
You can specify the style in the .col1, .col2 and .col3 classes the usual way.
.col1 {
background: yellow;
}