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>
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>
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 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>
What i'm trying to achieve here is to lock the HEADER and FIRST COLUMN so I can see what day it is and which name i'm under at all times while scrolling up/down or left/right.
I have tried some jquery plugins that make this happen but when the table cells are excessive, it tends to timeout on IE...so i would rather do this with PURE CSS..
Anyone have some valid input on this?
JSFIDDLE:
http://jsfiddle.net/dd5ysjus/15/
i would paste code here but its too much...
here is my css:
div.horizscroll {
overflow: scroll;
width: 600px;
height: 150px;
}
.header {
background: #D7DF01;
}
its hard to find things in it but anyway
add class fix which you want to fixed
.fix{ position:fixed; background:#fff;}
and
div.horizscroll {
overflow-x: scroll;
position:relative;
width: 600px;
}
hope it will help
Try this
<html>
<style>
table{border-collapse:collapse;}
table th{width:100px;}
.container{overflow:scroll;border:solid 1px red;width:700px;height:300px;}
.inner-table{position:relative;float:left;}
.inner-table tr td{padding:53px;background:#ccc;}
</style>
<body>
<table border=1>
<th></th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<tr>
<td class="first-td">First Column</td>
<td colspan="6" rowspan="4" style="padding:0;width:200px">
<div class="container">
<table border=1 class="inner-table">
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="first-td">First Column</td>
</tr>
<tr>
<td class="first-td">First Column</td>
</tr>
<tr>
<td style="height:16px;"></td>
</tr>
</table>
</body>
</html>
It Works!
But you must set the row height inside the container row according to your data needs.
You can also achieve this by changing html structure, please check your updated fiddle - http://jsfiddle.net/dd5ysjus/12/
<table class="table-intro">
..//here goes titles
</table>
<div class="horizscroll">
...//here all data you have
</div>
I want to show the below layout using html tables.
foo : jack
products : bag
bat
ball
shoes
blah : olah
I tried this but its not working as my expectations.
<table border="1">
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
<tr>
<th>row 1</th>
<td>
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
</td>
</tr>
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
</table>
Does this have to be a table? It seems that something like a definition list might be more appropriate to your usage, so I'd suggest the following as an option:
HTML:
<dl>
<dt>Foo:</dt>
<dd>Jack</dd>
<dt>Products:</dt>
<dd>Bag</dd>
<dd>Bat</dd>
<dd>Ball</dd>
<dd>Shoes</dd>
<dt>Blah:</dt>
<dd>Olah</dd>
</dl>
CSS:
dl {
width: 50%;
margin: 0 auto;
}
dt, dd {
font-size: 1em;
line-height: 1.2em;
}
dt {
width: 49%;
display: inline-block;
margin-top: 0.2em;
}
dd {
width: 49%;
display: block;
margin-left: 51%;
}
dt + dd {
display: inline-block;
margin-left: 0;
margin-top: 0.2em;
position: relative;
}
dt + dd:before {
content: " : ";
position: absolute;
left: -1em;
}
And the JS Fiddle demo.
Well this can be achieved by using rowspan
I think the problem is that, in your embedded table...
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
...you forgot to also wrap them in <td> elements:
<table>
<tr><td>foo1</td></tr>
<tr><td>foo2</td></tr>
</table>
But then, of course, you have the problem where the corresponding <th> is aligned in the middle of the table cell, instead of the top. But that can be fixed with the valign property:
<th valign="top">row 1</th>
<table>
<tr>
<td>foo</td><td>:</td><td>jack</td>
</tr>
<tr>
<td>products</td><td>:</td><td>bag</td>
</tr>
<tr>
<td><td/><td>bat</td>
</tr>
<tr>
<td><td/><td>ball</td>
</tr>
<tr>
<td><td/><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
Produces:
The key is that the colons are in a column of their own.
You can handle it using many way, but i just create it in quick way.
http://jsfiddle.net/dXU8D/
<table width="300" border="1">
<tr>
<td width="88">foo : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99">products : </td>
<td><table width="200" border="1">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td height="59">4</td>
</tr>
</table></td>
</tr>
<tr>
<td height="23">blah : </td>
<td>olah</td>
</tr>
</table>
Or you can use rowspan to achieve this.
http://jsfiddle.net/Mzyzx/
<table width="300" border="1">
<tr>
<td width="88">foo : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99" rowspan="5">products : </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td height="23">blah :</td>
<td>olah</td>
</tr>
</table>
<table>
<tr>
<td style="width: 70%;">foo</td><td style="width: 10%;">:</td><td style="width: 20%;">jack</td>
</tr>
<tr>
<td>products </td><td>:</td><td>bag</td>
</tr>
<tr>
<td colspan="2"> </td><td>bat</td>
</tr>
<tr>
<td colspan="2"> </td><td>ball</td>
</tr>
<tr>
<td colspan="2"> </td><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
one more example to be complete. http://jsfiddle.net/2ufsD/