I have little problem in my web page. I use bootstrap 4 and in table box I set inside other table as in the picture below. How to make the height of table inside the same as the hieght of the box (td)?
html:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Browser:
Because the table have CSS attribute margin-bottom: 20px, you need to add an override CSS to remove this attribute:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table table-no-margin" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<style>
.table-no-margin { margin: 0 }
</style>
This is happening because your nested table has a margin-bottom of 1rem(default bootstrap css). override it that's it.
Working example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%; margin-bottom:0px;">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This question has been asked many times before, but I'll answer it specifically for your scenario. It's not an issue of removing padding/margins.
In order to get a 100% height table, it's container must also be 100% height. So in this case set the containing td to height: 100%...
Demo on Codeply
<td>REVERT</td>
<td style="padding:0;height: 100%;">
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
Related
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;}
this question may be duplicate but I did not got solution for my requirement.
I need a help to have fixed/freeze header and few first columns for table inside
the scrollable div element. The data is dynamic as i columns and rows may increase or decrease depends of Data source. Currently it having ~86 rows and ~55 columns. The columns width is dynamic based on data.
My HTML code looks as below.
<html>
<body ng-app="myapp" ng-controller="mycontroller">
<table style="width:100%; height:90%">
<tr>
<td width=3%> </td>
<td>
<table style="width:100%;">
<tr>
<td>Page header</td>
</tr>
<tr><td></td></tr>
</table>
<table style="width:100%; height:90%">
<tr>
<td>
<div ng-style="{'width': twidth + 'px', 'heigth':theight + 'px','overflow-x': 'auto','overflow-y': 'auto'}">
<table>
<thead ng-repeat="h in dummy| limitTo:1">
<tr>
<th ng-repeat="(key, val) in h">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="h in dummy">
<td ng-repeat="(key, val) in h">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am having troubles trying to make this work the way I want.
I have a table with a fixed height. And all tr I put inside this table grow in height to use all available table's height, although tr have a specific height
For example my table has widht: 1000px and if I only have 1 row, this row will be 1000px high, if I have 2 rows, each one will be 500px high
Here is a simple fiddle https://jsfiddle.net/6wfbohbh/2/
table { height:1000px; }
tr {height: 100px; }
How can I have the tr use their heights and not be relative to the tables height?
do not set height unless you need it :
example shrinking header to the height it needs to hold content and let other rows to spray.
table {
height:400px;/* to see demo */
float:left;
border:solid red 1px;
}
/* see tds */
td {border:solid;}
<table>
<thead>
<tr style="height:1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr style="height:1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
</tbody>
</table><table>
<thead>
<tr >
<td>no height given on thead tr</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
that's about what you can do if td's content is even ...
If you want to keep tr's to that 100px height even there is not enough to keep them, then use a pseudo to fake last row:
tbody:after {
content:'';
display:table-row;
height:100%;
}
<table style="height:1000px;">
<thead>
<tr style="1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr style="height: 100px;">
<td>Hello</td>
<td>Hola</td>
</tr>
<tr style="height: 100px;">
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
I am not sure what you end result should look like, but if you need to specify a width of a container, why dont you use div instead. Here is your updated example:
https://jsfiddle.net/6wfbohbh/8/
<div style="height:1000px; background:lightblue">
<table style="background:lightgreen">
<thead>
<tr>
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr style="height: 50px;">
<td>Hello</td>
<td>Hola</td>
</tr>
<tr style="height: 50px;">
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
</div>
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>
Is there any way to make the header align towards right?
Tested in Internet Explorer 7 only.
<html>
<style type="text/css">
th {
text-align: left;
}
</style>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag
<th style="width: 100px; text-align: right;">Duration
</tr>
</thead>
<tbody>
<tr>
<td > one
<td> two
</tr>
</tbody>
</table>
</body>
</html>
First, close your tags. You have a lot of invalid HTML here. Second, you're mixing the table width (100%) as a percentage and the cell widths (250px, 100px) as pixel widths. These two are not compatible. Choose either one or the other and keep it consistent throughout your table.
<table style="width:350px" border="1">
<thead>
<tr>
<th style="width:250px;">Tag</th>
<th style="width:100px; text-align:right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
You aren't closing your TH tags (or your TD tags for that matter). Fix below:
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag</th>
<th style="width: 100px; text-align: right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td> one </td>
<td> two </td>
</tr>
</tbody>
</table>