This question already has an answer here:
How to display the first 3 list items and hide the rest with CSS nth-child?
(1 answer)
Closed 5 years ago.
Can I somehow hide all but first 3 rows in table via CSS only ? The table is filled by MySQL query and i don't know how long it can be. On button click i toggle it. In first i want to show only 3 rows and hide the rest. What i tryied is
.modal-body table tbody tr:nth-last-child(-n+5) {
display: none;
}
but in this case I am hiding only the last 5 rows. This number ( 5 in the example ) won't be static as i said. Thank in advance!
My table :
<table>
<thead>
<td class="p0 pl5 strong"><?=Yii::t('app','app.product')?></td>
<td class="p0 pl5 strong"><?=Yii::t('app','app.price')?></td>
<td class="p0 strong text-center"><?=Yii::t('app','app.Add')?></td>
</thead>
<?php if((isset($extras)) and !empty($extras)) {
foreach ($extras as $cnt => $extra) {
$cnt++;?>
<tr>
<td><?=$extra->title?></td>
<td><?= Yii::$app->moneyConvertor->getMoney($extra->getPrice()); ?></td>
<td class="p0">
<section title=".slideThree">
<div class="slideThree">
<input type="checkbox" value="<?=$extra->id?>" id="slideThree<?=$cnt?>" onchange="checkBoxValue(this, <?= $product->id ?>)" name="check" checked/>
<label for="slideThree<?=$cnt?>"></label>
</div>
</section>
</td>
</tr>
<?php }
}?>
</table>
Use the n-th child to hide all but first 3 rows
table tr:nth-child(n+4) {
display: none;
}
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
<tr><td>Row 6</td></tr>
<tr><td>Row 7</td></tr>
<tr><td>...</td></tr>
</table>
You can select first three rows by::
tr:nth-child(-n+3) {
color: red;
}
Jsfiddle link here : http://jsfiddle.net/w8g7j4bu/
Related
I need to hide “for 1 year” in the following, using css:
<tr class=”order-total recurring-total”>
<th rowspan=”1″>Recurring total</th>
<td data-title=”Recurring total”>
<strong><span class=”woocommerce-Price-amount amount”><span class=”woocommerce-Price-currencySymbol”>$</span>425.00</span></strong> for 1 year
<div class=”first-payment-date”><small>First renewal: July 4, 2020</small></div>
</td>
</tr>
my editor requires me to set it up something like:
.recurring-total {
display: none;
}
But that hides everything, which I don't want. Any help much appreciated!
First of all, you have errors: Change all occurrences of ” to ".
Then just change the visibility of the td to hidden and all the texts you want visible inside it to visible. That will do.
.recurring-total td[data-title='Recurring total'] {
visibility: hidden;
}
.recurring-total td[data-title='Recurring total'] * {
visibility: visible;
}
<table>
<tr class="order-total recurring-total">
<th rowspan=”1″>Recurring total</th>
<td data-title="Recurring total">
<strong><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>425.00</span></strong> for 1 year
<div class="first-payment-date"><small>First renewal: July 4, 2020</small></div>
</td>
</tr>
</table>
Sorry for the very specific title, couldn't think of how to say it in more general terms.
Assume you have a table and each row contains a cell that has an input, but some input fields have a class of 'DontRemoveMe'. How do you target every row except the 'DontRemoveMe' rows?
Manipulation of DOM Elements requires JavaScript. One way to achieve this is with jQuery:
function remove() {
$('tr:not(.dontRemoveMe)').remove();
}
.dontRemoveMe td {
background-color: green;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="dontRemoveMe">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jon</td>
<td>Jones</td>
<td>33</td>
</tr>
</table>
<button onclick="remove()">Remove rows</button>
CSS (Not Yet Implemented):
Using CSS level 4 selectors, I believe it would be
tr:has(td>input:not(>>.DontRemoveMe))
However, those aren't implemented in any browser. So you would want to use javascript.
Javascript:
// Select all rows that don't contain a input.DontRemoveMe
let rows = Array.from(document.querySelectorAll("tr")).filter(x => !(x.querySelector("input.DontRemoveMe")));
// Add a special class to these rows so we can target them with CSS
rows.forEach(x => x.classList.add("selected"));
td {
padding: 8px; /* Padding for all rows to make background visible */
}
.selected {
background: red;
}
<table>
<tr>
<td><input type="text" value="selected" />
</td>
</tr>
<tr>
<td><input class="DontRemoveMe" type="text" value="not selected" />
</td>
</tr>
<tr>
<td>
<input type="text" value="selected" />
</td>
</tr>
</table>
Here is an old school javascript way.
Find all the tr tags then find any children with class DontRemoveMe, if it doesn't find any add a .hide class to the current row.
But, honestly I'd question the reason you want to do it like this, chances are there is a more sensible way.
var tr = document.getElementsByTagName('tr');
var i = 0;
var length = tr.length
for (; i < length; i++) {
var dontRemove = tr[i].getElementsByClassName('DontRemoveMe')
if (!dontRemove.length) {
tr[i].classList.add('hide')
}
}
td {
color: #ededed;
}
.red {
background-color: #ff3030;
}
.blue {
background-color: #6495ED;
}
.hide {
display: none;
}
<table>
<tr class="red">
<td>Normal</td>
<td>Normal</td>
<td class="DontRemoveMe">Don't Remove Me</td>
</tr>
<tr class="blue">
<td>Can't see me</td>
<td>Can't see me</td>
<td>Can't see me</td>
</tr>
<tr class="red">
<td class="DontRemoveMe">Don't Remove Me</td>
<td>Normal</td>
<td class="DontRemoveMe">Don't Remove Me</td>
</tr>
</table>
This question already has answers here:
CSS3 selector :first-of-type with class name?
(10 answers)
Closed 5 years ago.
I have rows like this:
<tr class="team_2">Team Member</tr>
<tr class="team_2">Team Member</tr>
<tr class="team_1">Team Member</tr>
<tr class="team_2">Team Member</tr>
<tr class="team_1">Team Member</tr>
I want to highlight the first member of each team as team captain. I tried this:
table tbody tr.team_2:first-of-type, table tbody tr.team_1:first-of-type {
background: red;
}
This highlighted the first row, but not the third row (captain for team 1). Is this type of selector possible?
You'd have to do it backwards, see this answer for more info. Basically set ALL of those classes to the highlight color, then you look further down the DOM and reset any subsequent, sibling classes to the default.
Also, you should put td elements in your table:
.team_2, .team_1 {
background-color: red;
}
.team_1 ~ .team_1 {
background-color: transparent;
}
.team_2 ~ .team_2 {
background-color: transparent;
}
<table>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_1"><td>Team Member</td></tr>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_1"><td>Team Member</td></tr>
</table>
Ideally you would just add a class to the team member and target that specific class.
HTML
<tr class="team_2">
<td class="captain">Team Member</td>
</tr>
<tr class="team_1">
<td>Team Member</td>
</tr>
<tr class="team_1">
<td class="captain">Team Member</td>
</tr>
<tr class="team_2">
<td>Team Member</td>
</tr>
CSS
.captain{.....}
EDIT: I have edited my answer as the one Ben gave is better aligned to your question.
I have a table which I am trying to print. So the basic structure is contains a nested table both containing thead. Once I do a print, the pdf shows overlapping thead.
Please find attached link to reproduce the code. https://www.dropbox.com/s/a0l0s7blh401tg7/table.html
<table>
<thead>
<tr>
<td>heading</td>
</tr>
<tbody>
<tr>
<td>
<table>
<thead>
<tr>
<th>Heading 2</th>
</tr>
</table>
</td>
</tr>
</tbody>
</thead>
</table>
Try the following css (this only helps if you have a very plain thead an only one aswell):
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
Edit:
Regarding your question: The reason why your thead is overlapping is your table markup itself. Right now we have multiple table and thead, and also padding which is causing the overlapping. I did some research and found two different solutions you could use.
Fact 1: Only the lastest thead in your markup will be place on a second page when printed. Therefore you can check and adjust your table like this working example here, print button on the top :
<table>
<!-- thead on first page -->
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<!-- thead on first page an all following -->
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Fact 2: In my opinion the only working solution if you want all your thead information on all pages is to move all th in one thead at the top of the table, therefore you will have all informations on every page working example for this solution, print button on the top
Hopefully this helps :)
I have three tables, First Table margin-top is 50px and second table have variation rows depends on the text but the Third table I want to fix margin-top is :150px standard.
but third table not able to fix it on margin-top:150px because the second table have variation of the rows.
How to fixed the third table on margin-top:150px even-though the second table have variation rows?
for example :
Table 1
Name : Balakrishnan
Table 2 <br>
S.No particulars Amount <br>
1 Desk 200 <br>
Table 3
Total : 200
I want to fix constant position of the table 3 even though table2 rows increased
! when rows increased table 2 the third table should not move to down
I have tried the following code
.table1
{
margin-top:10px;
}
.table2
{
margin-top:15px;
}
.table3
{
margin-top:30px;
}
the above code defined in
the table class
please click the above link to view my picture
If I understand what you are asking the best solution is the following:
Wrap all the tables in a div
Give the middle div a fixed height and overflow: auto
HTML:
<div>
<table>
<tr>
<th>Name</th>
<td>Balakrishnan</td>
<td>Age</td>
<td>25</td>
</tr>
</table>
</div>
<div class="fixed">
<table>
<tr>
<th>S.No</th>
<th>Particulars</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>Item1</td>
<td>1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>Item2</td>
<td>1</td>
<td>50</td>
</tr>
<tr>
<td>3</td>
<td>Item3</td>
<td>1</td>
<td>50</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<th>Total:</th>
<td>250</td>
</tr>
</table>
</div>
CSS:
.fixed {
height: 150px;
overflow-y:auto;
margin: 20px 0 ;
}
Example:
http://jsfiddle.net/podjpv8j/
More Rows Example:
http://jsfiddle.net/podjpv8j/1/
I'm not sure what you want to do with the box in the middle. Meaning do you want it to adjust with the page, or scroll when it gets too much information in it. What it sounds like is you want a footer style box that stays in the same position though out the page. Check out this how-to site and follow the instructions to the footer.
This should help you understand how the 3rd box will stay in a "fixed position".
http://learnlayout.com/position-example.html