Expand last table column to fill container - javascript

How do you expand the last column of a table to fill the parent container without specifying a width for the container?
In this jsfiddle, I want the last column of the green table to fill the blue container. The width of the container should only be determined by its text.
.container{
background-color: #003388;
color: white;
display: inline-block;
}
table {
background-color: #008833;
color: white;
width:auto;
}
table tr td:last-child {
/* width:100%; */
}
Setting the width of the last td fills the entire page.

One possible approach is given below. It uses...
width: 100% rule (instead of width: auto) to make table fill the container
width: 1px; white-space: nowrap; combo trick to make all the columns define their width based on content width; without that rule it seems there's no simple way to override default behaviour of table-layout: auto sharing the whole width between columns equally.
max-width: 1px for the last column to ensure that inline-block container is not extended when that column grows, and text is wrapped instead
.container{
background-color: #003388;
color: white;
display: inline-block;
}
table {
background-color: #008833;
color: white;
width: 100%;
}
table td:not(:last-child) {
width: 1px;
white-space: nowrap;
}
table td:last-child {
max-width: 1px;
}
<div class="container">
long text long text long text long text long text long text
<table>
<tr>
<th>Product</th>
<th>Cardinality</th>
<th>Price per item</th>
</tr>
<tr>
<td>Apple</td>
<td>5</td>
<td>$2</td>
</tr>
<tr>
<td>Pear</td>
<td>3</td>
<td>$3</td>
</tr>
<tr>
<td>Sausage</td>
<td>10</td>
<td>$0.5</td>
</tr>
<tr>
<td>Pineapple</td>
<td>2</td>
<td>$8</td>
</tr>
<tr>
<td>Tomato</td>
<td>5</td>
<td>$1</td>
</tr>
<tr>
<td>Lightsaber</td>
<td>2</td>
<td>$99 999 999999999 99999999 99999999</td>
</tr>
</table>
</div>

Use fractional units fr to automatically take up the fraction you desire

Related

Fix covering hovered table / hovering problem with table

I have a problem with creating table. I need to create a table with some of cells with hover/tooltip event. For example when I point to the cell, I need to show one column table with links, but when do this in that way I have problem with overlaping (I can't use links from first cell). For now I only tried to use CSS and HTML, but soltuion with JS is also accepted.
HTML:
<div class="ttip">
<a class="foo">FOO</a>
<table>
<tr>
<td><a href='bar'>Bar</a></td>
</tr>
<tr>
<td><a href='baz'>Baz</a></td>
</tr>
</table>
</div>
<div class="ttip">
<a class="foo">FOO2</a>
<table>
<tr>
<td><a href='bar2'>Bar2</a></td>
</tr>
<tr>
<td><a href='baz2'>Baz2</a></td>
</tr>
</table>
</div>
Style:
.ttip {
position: relative;
display: table;
}
.ttip>table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
.ttip>table td {
border: 1px dotted #000;
padding: 2px;
}
.ttip:hover>table {
display: table;
}
Live:
https://jsfiddle.net/uLm0gjcn/3/
Regards
The FOO2 is rendered after the FOO , meaning when its displayed, its technically below FOO2 text. To fix that you need to apply z-index in your css here in .ttip>table
.ttip>table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
z-index: 1;
}
This way, when the drop-down/tool-tip appears from FOO, it is rendered on top of FOO2.
Edit. Also, to make it not transparent, apply a background-color to css in .ttip>table. for example for a white background background-color: white;

CSS/HTML fixed position element resizing when browser resizing

This is my situation: I have a table with table header position: fixed and a couple of table body rows with their width set to 100%.
I am trying to make the header row resize properly when browser resizes, so its cells lines up body row cells.
How am I going to achieve that? (trying to make a position: fixed element react to browser size-change dynamically)
Here is my code. A very simple webpage
<html>
<head>
<style>
body{
width:100%;
}
thead{
position:fixed;
width:100%
overflow:visible;
align:center;
}
th{
border:2px solid black;
width:20%;
text-align:center;
}
td{
border:2px solid black;
width:20%;
text-align:center;
}
table{
width:80%;
margin:auto;
margin-top:50px;
}
.empty{
height:30px;
}
.empty td{
border:none;
}
</style>
</head>
<body>
<table>
<thead>
<th>
heading1;
</th>
<th>
heading2;
</th>
<th>
heading3;
</th>
<th>
heading4;
</th>
<th>
heading5;
</th>
<thead>
<tbody>
<tr class="empty">
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>
cell1;
</td>
<td>
cell2;
</td>
<td>
cell3;
</td>
<td>
cell4;
</td>
<td>
cell5;
</td>
</tr>
<tr>
<td>
cell1;
</td>
<td>
cell2;
</td>
<td>
cell3;
</td>
<td>
cell4;
</td>
<td>
cell5;
</td>
</tr>
<tbody>
</table>
</body>
</html>
I'm developing a website tool using ASP.net currently. Any solution in ASP.net will be much appreciated.
The table element is not quite flexible as other in the html. Aparently the 'position:fixed' property will make the table ignore the width specification.
Therefore I tweaked your html and css a bit, in order to better divide the document's parts into header and content (section).
Basically, the header will contain only the table head.
The section will contain all the table rows and data in it. When scrolling, the header element will remain fixed and the table head cells in it (which has been given the exact same css attributes as the td cells) will remain perfectly aligned with their respective columns.
Hope this helps, good luck.
body {
width: 100%;
margin: 0px;
}
header {
width: 100%;
position: fixed;
margin-top: -30px;
}
section {
width: 100%;
margin-top: 50px;
}
table {
width: 80%;
margin: 0px auto;
}
header table th,
section table td {
width: 20%;
text-align: center;
border: 2px solid black;
}
<header>
<table>
<thead>
<th>heading1;</th>
<th>heading2;</th>
<th>heading3;</th>
<th>heading4;</th>
<th>heading5;</th>
</thead>
</table>
</header>
<section>
<table>
<tbody>
<tr>
<td>cell1;</td>
<td>cell2;</td>
<td>cell3;</td>
<td>cell4;</td>
<td>cell5;</td>
</tr>
<tr>
<td>cell1;</td>
<td>cell2;</td>
<td>cell3;</td>
<td>cell4;</td>
<td>cell5;</td>
</tr>
</tbody>
</table>
</section>

How do I make a <tr> behave as a fixed topbar?

I have a table that displays some information with the first row being headers for the respective information.
On scrolling, let's say 100px from the top of the page, i'd like the header row to stay fixed at the top of the visible screen so that as you scroll down the table you can still see the headers.
I've tried:
$(window).scroll(function(){
if( $(window).pageYOffset > 100 ){
$("#resultTableHeader").css('position', 'fixed');
$("#resultTableHeader").css('top', '70px');
$("#resultTableHeader").css('z-index', '2');
}
});
but it doesn't seem to do anything.
Even if it did, however, make the header row fixed, If one column expanded the header row column, then pulling it out of the flow would make that column not be expanded anymore.
Is there a way to do this?
EDIT (more info):
I can guarantee that the whole page will be just the table so staying at the top of the screen for any Y co-ord past 100px would be acceptable.
When I say fixed I mean that the header row will stay pinned to the top of the VISIBLE window as you scroll down along the table.
Fixed table header with pure html and css
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
This is a common problem when using table elements. Most libraries use two tables to fix this. The first table only contains the th elements and the second table has all tr elements.
Check jqgrid for example.

Trying to make fixed table headers with horizontal scroll bar. How to set overflow: auto, but keep margins transparent?

I am trying to make a table with fixed headers and horizontal scrolling functionality, but to do so I need to make the "section"'s top margin transparent in what I have here:
html, body {
margin:0;
padding:0;
height:100%;
}
.section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
margin-top: 37px;
}
.container {
margin-top: -37px;
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
margin-top:-37px;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<div class="section">
<div class="container">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div>Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/byB9d/6212/
Thanks in advance to anyone with suggestions!
P.S. I would like a pure css solution, please!
I decided to remove most of your css to (hopefully) give a clearer answer to this question. I did however not change any of your html.
Fiddle with code
x-scrolling and width
This method relies on using the "table" as a container for "thead" and "tbody". "table" will determine the scrolling along the x-axis. Therefore it has "overflow-x: auto". This way the "thead" can stay positioned above the "tbody" while scrolling the table. (will be explained later)
This element also determines the width the table will take up on your webpage.
In order for the content to scroll horizontally we have to make sure the total width of "tbody" and "thead" is longer than the width of "table".
Finally you should also add the same width to your cells so the headers appear properly above your data. I did this by applying a width to "tr th:nth-child(1), tr td:nth-child(1)" (for each column).
y-scrolling and height
We want the "thead" to stay positioned on top of our table. Even when we scroll. Therefore we simply convert it to a block element.
The "tbody" is another story. we want to be able to vertically scroll it. Therefore we add "overflow-y: auto" and also set a fixed height for the element (otherwise it will just drop down and not scroll).
The total height of the table will be the height of "thead" and "tbody". The "table will adapt its size to fit it."
The CSS (html is the same as it is in the question post)
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th div{display: none;} /*why is this html even here!?!?*/
table {
display: block;
position: relative;
border: 1px solid #000;
width: 75%;
border-spacing: 0;
margin: auto;
overflow-x: auto;
}
thead{
display: block;
position: relative;
width: 700px; /*total width of columns*/
}
tbody{
display: block;
position: relative;
height: 250px;
overflow-y: auto;
width: 700px; /*total width of columns.*/
}
tr th:nth-child(1), tr td:nth-child(1){
width: 100px;
}
tr th:nth-child(2), tr td:nth-child(2){
width: 150px;
}
tr th:nth-child(3), tr td:nth-child(3){
width: 450px;
}
PS: I assume this is what you were trying to ask.

Div and a Table side by side?

So I have 2 Div's one with a form and one with a table. the problem is that the table div is coming below the form div. I tried using float right, and overflow css attributes. but still no success.
CSS styling of my table: jsFiddle
Full webpage here
HTML:
<div id="existing_ledgers">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>
</div>
Put everything in a parent div, give the parent div display:inline-block
Then give float right/left to your child divs
Example
#registration-form {
display: inline-block;
float: left;
}
#existing_ledgers {
display: inline-block;
float: left;
}
use this css in your web page
.DA_custom_form {
float: left;
margin: 0 auto 5em;
max-width: 600px;
padding: 0 10px;
position: relative;
z-index: 1;
}
#el {
float: right;
margin: 0 auto;
max-width: 600px;
}
using float left and defined widths of the containers: they have to fit into the container, both being 50% wide will solve the problem.
here you have a working example:
http://jsfiddle.net/qLGJt/
#one, #existing_ledgers{float:left; width:50%; }

Categories