I have a problem with table. This is my code:
<table class="employers__table">
<thead>
<tr>
<td>Таб. №</td>
<td>Сотрудник / СИЗ</td>
<td>Разм. ряд</td>
<td>Кол.</td>
<td>Ед. изм.</td>
<td>Дата выдачи</td>
<td>Дата замены</td>
<td>Списать СИЗ</td>
<td>Продлить СИЗ</td>
</tr>
</thead>
<tbody>
<tbody class="label">
<tr>
<td colspan="9">
Aaa
</td>
</tr>
</tbody>
</tbody>
</table>
.employers__table {
overflow-y: scroll;
}
.label tr > td {
background-color: #000;
color: #fff;
}
Inner <tbody> doesn't stretch. This is how it looks.
Why does this happen?
I tried to create a table with the same structure in the new project, and it worked there...I don't understand.
You are basically going against the basic semantics of HTML TABLE.
It allows you to have multiple <tbody> inside a table, but not nested tbody
<TABLE>
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
<TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TBODY>
</TABLE>
Corrected Snippet
.employers__table {
overflow-y: scroll;
}
.label tr>td {
background-color: #000;
color: #fff;
}
<table class="employers__table">
<thead>
<tr>
<td>Таб. №</td>
<td>Сотрудник / СИЗ</td>
<td>Разм. ряд</td>
<td>Кол.</td>
<td>Ед. изм.</td>
<td>Дата выдачи</td>
<td>Дата замены</td>
<td>Списать СИЗ</td>
<td>Продлить СИЗ</td>
</tr>
</thead>
<tbody class="label">
<tr>
<td colspan="9">
Aaa
</td>
</tr>
</tbody>
</table>
Related
I have the following table:
Comm Layer
Implemented By
Application
Application
Transport
OS
Internet
OS
Link
OS
Link
Hardware
<table>
<thead>
<tr>
<th>Comm Layer</th>
<th>Implemented By</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td>OS</td>
</tr>
<tr>
<td>Internet</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>Hardware</td>
</tr>
</tbody>
</table>
I would like to merge the two cells that say "Link" and the three cells that say "OS". I tried using the rowspan attribute in several ways but to no avail. I was able to merge either the two "Link" cells or the three "OS" cells, but not both.
In short: you cannot have a <tr> where all cells participate in a rowspan="" because that creates a zero-height row (as there's no row-specific content). I feel this is a design flaw in HTML.
One workaround is to have a zero-width column that always has non-rowspan="" cells (which are propped up with , but hidden (using visibility: hidden;, not display: none;):
(My posted code comments out the removed cells with <!--<td>OS</td>--> for illustrative purposes, obviously you can remove those in your final version)
table {
border: 1px solid #999;
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
tr > *:nth-child(1) { visibility: hidden; }
<table>
<thead>
<tr>
<th> </th>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td> </td>
<td>Transport</td>
<td rowspan="3">OS</td>
</tr>
<tr>
<td> </td>
<td>Internet</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<td rowspan="2">Link</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<!--<td>Link</td>-->
<td>Hardware</td>
</tr>
</tbody>
</table>
There's probably improvements using more modern CSS techniques to enforce a minimum row height though - I've been using the technique since before I stopped using Dreamweaver in 2004.
<!-- Try this one -->
<table align="center" cellspacing="0" cellspadding=="0">
<thead>
<tr>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td rowspan="2">OS</td>
</tr>
<tr>
<td>Internet</td>
</tr>
<tr>
<td rowspan="2">Link</td>
<td>OS</td>
</tr>
<tr>
<td>Hardware</td>
</tr>
</tbody>
</table>
How can I do to change the style of the first row of a group of rows (identified by a td with a sub-item class) that is near to a sibling row (identified by a td with the item class):
HTML:
<table>
<thead>
</thead>
<tbody>
<tr>
<td class="item"></td>
</tr>
<tr>
<td class="sub-item"><!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item"></td>
</tr>
<tr>
<td class="sub-item"></td>
</tr>
<tr>
<td class="item"></td>
</tr>
<tr>
<td class="sub-item"><!-- I need to style this one --></td>
</tr>
</tbody>
</table>
I'd like to style with an inset box-shadow all the first rows matched by this criteria.
I tried with the sibling operator without success:
CSS:
tr > td.item ~ tr > td.sub-item:first {}
With the current code you would have to use :nth-[last]-child()
tr:first-child + tr .sub-item, tr:nth-last-child(2) + tr .sub-item {
background-color: red
}
<table>
<thead>
</thead>
<tbody>
<tr>
<td class="item">1</td>
</tr>
<tr>
<td class="sub-item">2<!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item">3</td>
</tr>
<tr>
<td class="sub-item">4</td>
</tr>
<tr>
<td class="item">5</td>
</tr>
<tr>
<td class="sub-item">6<!-- I need to style this one --></td>
</tr>
</tbody>
</table>
Also, you can add a class to tr and achieve what you want.
.row + tr .sub-item {
background-color: red
}
<table>
<thead>
</thead>
<tbody>
<tr class="row">
<td class="item">1</td>
</tr>
<tr>
<td class="sub-item">2<!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item">3</td>
</tr>
<tr>
<td class="sub-item">4</td>
</tr>
<tr class="row">
<td class="item">5</td>
</tr>
<tr>
<td class="sub-item">6<!-- I need to style this one --></td>
</tr>
</tbody>
</table>
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
I have a nested table as follows -
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
This is not giving me any result. What is the correct way of achieving this?
Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.
table.parent tr:first-child td {
color: red;
}
table.nested tr:first-child td {
color: black;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
You said that..
I want only the first td of each row in the parent table to be colored
So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).
If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).
This is not possible with CSS2 or CSS3.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
See CSS selector - element with a given child
Edit
You can use jquery/javascript to do so.
For example, to add opacity and color css properties:
$(document).ready(function(){
$('table.parent > tbody > tr > td:first-child').each(function(){
if ($(this).has('table.nested').length == 0){
$(this).css('opacity', '0.5');
$(this).css('color', 'red');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Just give some class to TEXTA & TEXTB
for example:
(html)
<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>
(css)
.red-color-text{color: red;}
I'm trying to solve a specific problem with CSS selectors. I have the foillowing HTML:
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
What I need to do is select the first occurence of the class "Region" within the document, and then select the th element, which contains the text "Header 1" (there will only be 1 th element within these tables). My reason for this is so i can apply a background color to this element.
I currently have this css which applies background color to the th elements of the two "Region" tables:
TABLE.Region TH {background-color: #00A5DB;}
But I want to apply background-color: #BAD80A to only the first occurence of "Region"
I know I can achieve this using javascript and I know this is an old way of arranging elements on a page, but this is a change to a company intranet with many pages, so changing just the style sheet would be by far the quickest way of acheiving this, as I don't really have the time to make sweeping changes at the moment! We use IE11 as our main browser, so the answer can be quite specific if necessary.
Any help would be appreciated!
Thanks
You can use the first-child psuedo-selector on the td and then target the th inside .region.
Here's a demo:
td:first-child .Region th {
background-color: red;
}
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
/*Both work fine*/
table.Layout td:first-child th{
background: #555;
}
td:first-child th{
background: #555;
}
JSFiddle - http://jsfiddle.net/uL9uLLuf/
i want to add horizontal scroll bar on my table.
i tried every thing like overflow:scroll etc.
but it is not working on my table .
it display another table below screen.
i am displaying multiple tables in for loop.
but i need to display all tables in single row.but it goes down below the scree.
plz suggest me....
<div class="box-body table-responsive">
<table style="float:left;">
<tr>
<th colspan="2" style="border:1px solid #ddd; "></th>
</tr>
<tr>
<td style="float:left;">
<table width="100%" class="table table-bordered table-striped">
<tr>
<th colspan="2" style="text-align:center"><?php echo $row["Edition"]; ?></th>
</tr>
<tr>
<td colspan="2" class="scheduletime" style="text-align:center"><?php echo $row["scheduletime"]; ?></th>
</tr>
<td>Page No</td>
<td>Actu.Time</td>
</tr>
<tr>
<td class="scheduletime" style="text-align:center"><?php echo $i; $abc = $i; ?></td>
<td class="actualtime"> Save</a></td></tr>
</table>
</form>
</td></tr></table>
</div>
A table is not an inline element by default.To do so, you'd have to set its style/css to display: inline-table.
And to prevent the line break, you have to add to the table's parent (maybe to the body, it depends of your scenario) the property white-space: nowrap;
body {
white-space: nowrap;
}
.tb {
border: 1px solid red;
width: 400px;
display: inline-table;
}
<table class='tb'>
<tr>
<td>table</td>
<td>1</td>
</tr>
</table>
<table class='tb'>
<tr>
<td>table</td>
<td>2</td>
</tr>
</table>
<table class='tb'>
<tr>
<td>table</td>
<td>3</td>
</tr>
</table>
<table class='tb'>
<tr>
<td>table</td>
<td>4</td>
</tr>
</table>