Here is the fiddle of what I'm trying to achieve: demo
.editable-field {
display: block;
justify-content: inherit;
width:100%;
height:100%;
}
.editable-input {
border: none;
font-size: inherit;
background: inherit;
color: inherit;
transition: 0.3s all linear;
width:100%
height:100%;
}
Even with 100% width and height, the input doesn't seem to stretch along the cell.
I have a table where the cells expand vertically if the text is long (which is what I want). The problem is, if I want to have editable cells (such as the third one down in the demo), the input is static and doesn't "grow" with the text. Is there a css-only way, or J-Query to fix this?
The following solutions may works for you .
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<div class="container">
<table>
<tr>
<td>Not Editable but very long and takes fffffffffffffff multiple lines</td>
</tr>
<tr>
<td>Not Editable</td>
</tr>
<td contenteditable >
asdfad
</td>
<tr>
<td>Not Editable</td>
</tr>
</table>
</div>
I used contenteditable. This is html5 feature .
Related
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
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;
I'm currently working on a Chrome Extension and I'm using Semantic UI to build the interface. When the user activates the extension it will show a popup which is actually an iFrame. In this iFrame I have a table and I'd like this table to take the full width of the iFrame. The iFrame width is fixed (500px). The problem is because the iFrame is 600px the table is displayed as the device is 500px (makes sense since it's a responsive framework.
But I'd like to change this behavior and force the table to display as it would be on a desktop screen.
Today this is what I get
Now I'd like to obtain the following result (fake image :)
Here is the code of my iFrame
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="js/ext/jquery-3.3.1.min.js"></script>
<script src="js/ext/semantic-2.4.2.min.js"></script>
<script src="js/popup.js"></script>
</head>
<body>
<div>
<div>
<table class="ui celled padded collapsing table">
<thead>
<tr>
<th class="single line">#</th>
<th>Event mapping</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td class="single line">
<div class="ui right action left icon input mini">
<i class="search icon"></i>
<input type="text" placeholder="Selector">
<div class="ui basic floating dropdown button mini">
<div class="text">Identify</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Page</div>
<div class="item">Track</div>
</div>
</div>
</div>
</td>
<td class="right aligned">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<div class="ui left floated">
<button id="btn-startcapture" class="positive ui button">Start capture</button>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
And the CSS style I apply to the iframe tag on the caller page
iframe.segmentizor-panel-iframe-toggle {
left: calc(100% - 500px) !important;
}
iframe.segmentizor-panel-iframe {
top: 0px;
left: calc(100% + 10px);
display: block;
z-index: 2147483647;
box-shadow: rgba(0, 0, 0, 0.25) 7px 0px 12px 13px;
position: fixed !important;
width: 500px !important;
height: 100% !important;
opacity: 1 !important;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
transition: left 0.4s ease-in-out 0s !important;
}
Sorry if the question looks quite trivial. Still in the learning curve... Thanks for your help.
Have you tried editing the max-width css? Althought you may be setting the width to be 800px, if the max is only 600 it would only get to that.
First, remove the collapsing class
https://semantic-ui.com/collections/table.html#collapsing
Collapsing
A table can be collapsing, taking up only as much space as its rows.
Also, I think you could add some additional style inside the iframe's head section.
After
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
Add some style like you would on any page...
<style>
table{
width: 100%;
}
</style>
Or you could add some classes, or other css styling for your needs.
Thanks for your guidance I managed to do it by:
Adding the following class in my iFrame style
min-width: 800px !important;
Then in my iFrame page I added a new div with the size of the iFrame and used a width of 100% for the table
<div style="max-width: 450px">
<table class="ui celled padded unstackable collapsing table" style="width:100%">
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>
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.