I have a table, with many tds. I want to display a div behind this to give the appearance of it having rounded corners. I have called the Div within a th. Here is a jsFiddle example of the problem.
I thought I could do it using position: realtive; and z-index: -100; yet it doesn't seem to be what I want.
Thanks to anyone for any help.
I think you’ll need a different approach. For the <div> to be the same height as the <table>, you’ll need the <div> to wrap the table:
<div>
<table>
....
</table>
</div>
That’ll also make the <div> appear “behind” the <table> without fiddling with z-index.
From your jsFiddle example, I think you only want the background behind one table column? To achieve this, you’ll need to:
fix the width of all the columns in your <table>
set the width of the <div> to the width of the column you want it to be the background for (or a little wider)
set the left margin of the <div> to the width of the other columns in the <table>
set the left margin of the <table> to minus the width of the other columns in the table.
Maybe something like this?
<div class="compare-rounder">
<table>
<thead>
<th class="price">Price</th>
<th class="product">Product</th>
</thead>
<tbody>
<tr>
<td>$4000</td>
<td>for this</td>
</tr>
</tbody>
</table>
</div>
table,
table td,
table th
{
border: 1px #000 solid;
}
table
{
margin-left: -500px;
}
.product
{
width: 500px;
}
.price
{
width: 50px;
}
.compare-rounder
{
width: 60px;
background-color: #f0f; /*bright pink*/
border: 1px #ccc solid !important;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-left: 500px;
}
You should do this I guess :
<div class="compare-rounder">
<table>
...
</table>
</div>
Related
This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 3 years ago.
Currently
I have a table row that contains a textarea for user input. The purpose of textarea is so user can input multiple lines.
Code:
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
}
th, td {
text-align: center;
border: 1px solid black;
padding: 10px;
}
.container {
border: 1px solid blue;
}
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
}
.fixed-min {
min-width: 600px;
}
<!DOCTYPE html>
<html>
<body>
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>
<div class="container fixed-min">
<textarea class="text-area">Set width in this big column
</textarea>
</div>
</td>
<td>
<div class="container">
<textarea class="text-area">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
https://jsfiddle.net/to45asgy/1/
Problem
I would like the textarea to show all content by auto-adjusting height rather than requiring the user to scroll.
Notes:
I saw a solution on Creating a textarea with auto-resize, but there has to be a simpler solution through CSS that I am missing.
I used to use an editable rather than before, but because I am using this html within a react component, there were other complications with using an editable so I switched to a . I wanted to know if there is a solution, but appreciate it if there is not, and will then refactor the code to use once more.
EDIT: Seems there is no CSS only solution for :'(
It will hide scroll and set size for content text
function autoheight(element) {
var el = document.getElementById(element);
el.style.height = "5px";
el.style.height = (el.scrollHeight)+"px";
}
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
}
th, td {
text-align: center;
border: 1px solid black;
padding: 10px;
}
.container {
border: 1px solid blue;
}
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
overflow:hidden;
min-height:100%;
}
.fixed-min {
min-width: 600px;
}
<!DOCTYPE html>
<html>
<body onload="autoheight('ta')">
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>
<div class="container fixed-min">
<textarea class="text-area">Set width in this big column
</textarea>
</div>
</td>
<td>
<div class="container" >
<textarea id="ta" onkeyup="autoheight('ta')" class="text-area">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can make it a div and apply "contenteditable" = true.
Updated fiddle at : "https://jsfiddle.net/hbnr2yk6/"
Relevant changes required are:
<div class="text-area" contenteditable="true">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</div>
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}
**************************** javascript solution ***********
Possible solution to fix the problem with textarea would be to use javascript. I have updated the fiddle at "https://jsfiddle.net/uqr98jf4/". In table column 1 there is textrea solution and table column 2 there is div solution. See if any one of it solves your problem.
I always use this library
autosize(document.querySelector('textarea'));
Demo
Please add row textarea rows and columns and columns to textarea
and add overflow: hidden or auto.
To remove the scrollbar you can use overflow: auto; or overflow: hidden;.
https://www.w3schools.com/cssref/pr_pos_overflow.asp
overflow: auto; will automatically create a scrollbar if the text area becomes too overloaded with text.
CSS isn't going to be able to read the content within the textarea tag to dynamically resize the textarea tag.
The question is not very short, but it's easy to understand.
Here is the jsFiddle
I have two nested tables, like that:
Here is the markup:
<table class="outer">
<tr>
<td></td>
<td>
<table class="inner">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<style>
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.outer {
height: 100px;
}
.inner {
background-color: #ccc;
height: 50px;
}
</style>
The 1st strange thing
Then, I want to add a negative horizontal margin to the inner table:
.inner {
margin: 0 -10%;
}
The expected output is something like this:
But instead, I get this:
The problem may be solved by placing the inner table in the div:
<!-- outer table -->
<div class="wrapper">
<table class="inner-wrapped">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- outer table -->
<style>
.wrapper {
margin: 0 -10%;
}
.inner-wrapped {
background-color: rgb(0,200,0);
height: 50px;
}
</style>
The 2nd strange thing
If I set negative horizonal margin -10px (previously we used percents, not pixels), then in additional that table moves only to the left (like in the first case), it sigifically reduces in the width:
.inner {
margin: 0 -10px;
}
The questions
Why both this stange things occur?
What is a way to resolve it? Is it a good practise to simply use a wrapper, like I do, or I should use another, more clever way?
If main table is width:100%; it will expand all the way and inner table will take the initial 100% for reference. negative margin won't expand it as long as no content makes it to .
it will work if :https://jsfiddle.net/md2tx2d4/2/
.inner { margin:0 -10%; width:120%;}
or if you let it live without width and let it grow from its content
table { }
td {width:200px;/* instead real content missing here */}
https://jsfiddle.net/md2tx2d4/1/
I have a table, where the left td takes the majority of the space, and the right td have very little space which forces the words to break.
I am trying to make so that both TD are the same width of the text content inside. I have done some research online but nothing I found fixed the problem.
Any help would be really appreciated! Below is my table code and css
CSS:
#order_info_container {
width: 620px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}
#customer_service {
padding-top: 10px;
vertical-align: top;
text-align : right;
}
#order_information { padding-top: 20px; }
#totals_o {
padding-top: 20px;
text-align: right;
}
HTML:
<table id='order_info_container'>
<!--This left td is taking most of the space -->
<tr>
<td><img id='o_summary_logo' src='o_summary_logo.png'></td>
<!--This right td is being squished -->
<td id='customer_service'><b>Customer Service # (646)-397-5751</b><br>
Thank you for your business </td>
<!--This left td is taking most of the space -->
<tr id='totalswrapper_o'>
<td id='order_information'>Order Placed - 07/01/14 12:18AM<br>
<span id='order_number'>Order # - 775</span><br>
<span class='conf_num'>Confirmation # - 81<br>
</span></td>
<!--This right td is being squished -->
<td id='totals_o'>Sub Total = $28.95<br>
Tax = $2.57<br>
Grand Total = $33.52<br></td>
</tr>
</table>
You can use the table-layout: fixed attribute on your table so that all cells have the same width. Example on jsfiddle here:
HTML:
<table>
<tr>
<td>column1 Lorem Ipsum dolor sit amet</td>
<td>column2 consectetur…</td>
</tr>
</table>
CSS:
table {
table-layout: fixed;
width: 200px;
border-collapse: collapse;
}
td {
border: 1px solid red;
}
Also, the fixed layout will automatically give the same proportion of the length to any number of cells you have, i.e. if you had 2 cells, each one will be 50% of the table, 3 would be 33% each and so on… You can play with the fiddle to try this.
Defining a width of 50% for your <td> in CSS should solve this problem. Having said that, 50% will work if you have only 2 <td>'s.
table td{
width: 50%;
}
FIDDLE. I have added a border in fiddle to show this effect clearly.
A better way would be to use the table-layout: fixed; property on table like #arielnmz recommends in his answer. It works best even when you have dynamically generated columns. This way, you won't have to calculate and define how much space a column takes. They will always be equally divided. So, you should probably go with this approach instead.
table{
width: 100%;
table-layout: fixed;
}
FIDDLE
I'm trying to create an HTML table where the column widths are changed dynamically, and in case the table width becomes larger than the container, a horizontal scrollbar appears.
However, I can't seem to get this to work - when I set the container width, it acts as an upper bound for the table and even though I set a column's width explicitly (either using CSS or Jquery) the table refuses to display the correct width. Even when I set "overflow: scroll", the scrollbar never becomes active.
The table width should also decrease when the column widths become smaller, which is why I can't use table width = 100%.
Note: I know this issue can be bypassed if I explicitly set the table width (e.g. table width=500px) every time a column width changes. I am hoping there is a more elegant solution...
Here is the code:
JFiddle: http://jsfiddle.net/sangil/NdY22/
HTML
<div class="container">
<table>
<thead>
<tr>
<th class="a">th 1</th>
<th>th 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>td 1</td>
<td>td 2</td>
</tr>
</tbody>
</table>
</div>
CSS
table {
table-layout: fixed;
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
}
table th {
border: 1px solid black;
background-color: lightsteelblue;
}
.container{
border: 1px solid lightsteelblue;
width: 300px;
overflow: auto;
}
JS
$(function() {
$('.a').width(500);
});
Not sure if I understood your question correctly. If you are after scrollbars in table then you can simple do that by using display: block on .a class:
.a {
width: 400px;
display:block;
}
Working DEMO
EDIT:
<div STYLE=" height: 100px; width: 100px; font-size: 12px; overflow: auto;">
<table bgcolor="green">
<tr><td bgcolor="blue">testing </td></tr>
<tr><td>free php scripts;/td></tr>
<tr><td bgcolor="blue">free php scripts</td></tr>
<tr><td>free php scripts</td></tr>
<tr><td bgcolor="blue">free php scripts</td></tr>
</table>
</div>
see reference
I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:
td.longColumn
{
width: 300px;
}
and here is a simplified version of my table
<table>
<tr>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
[ . . and a bunch more columns . . .]
</tr>
</table>
For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).
The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.
Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:
#main
{
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
Giving it both max-width and min-width attributes should work.
I agree with Hristo but there are some cases where table need to be used and solution to your table problem is adding below class to the table and then changing any td width as per your need.
.tables{ border-collapse:collapse; table-layout:fixed;}
I hope this helps for someone who is looking for table solution!
I had the same problem with a bunch of columns where I wanted spacers columns.
I used to do:
<td style='width: 10px;'> </td>
But when the table was wider than window, the spacers were not really 10px, but maybe 5px.
And using only DIVs without a TABLE was not an option in my case.
So I tried:
<td><div style='width: 10px;'></div></td>
And it worked very well ! :)
The best way to set your column widths (td's) is to use a table header (th's). Table headers will set the width on your td's automatically. You just have to make sure that your columns inside your thead are the same number of columns in your tbody.
Check it out here:
http://jsfiddle.net/tKAj8/
HTML
<table>
<thead>
<tr>
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="long-column">Long Column</th> <!-- th sets the width -->
</tr>
</thead>
<tbody>
<tr>
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="gray">Long Column</td> <!-- td inherits th width -->
</tr>
</tbody>
</table>
CSS
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }
.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }
.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
I had issues with not being able to size columns in a table-layout: fixed table that was using a colspan. For the benefit of anyone experiencing a variant of that issue where the suggestion above doesn't work, colgroup worked for me (variation on OP's code):
div {
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
td.longColumn {
width: 300px;
}
table {
border: 1px solid;
text-align: center;
width: 100%;
}
td, tr {
border: 1px solid;
}
<div>
<table>
<colgroup>
<col class='longColumn' />
<col class='longColumn' />
<col class='longColumn' />
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td colspan="7">Stuff</td>
</tr>
<tr>
<td>Long Column</td>
<td>Long Column</td>
<td>Long Column</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
</tr>
</tbody>
</table>
</div>
For those that are having Table Cell/Column width problems and table-layout: fixed did not help.
When applying fixed widths to table cells (<td> or <th>), do not assign a width to all of the cells. There should be at least one cell with an (auto) width. This cell will act as a filler for the remaining space of the table.
e.g.
<table>
<thead>
<tr>
<th style="width: 150">Assigned 150 width to Table Header Cell</th>
<th style="width: 100">Assigned 100 width to Table Header Cell</th>
<th>No width assigned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 150">Assigned 150 width to Table Body Cell</td>
<td style="width: 100">Assigned 100 width to Table Body Cell</td>
<td>No width assigned</td>
</tr>
</tbody>
</table>
P.S. you can use style classes here, you don't need to use an in-line style.
Use table-layout property and the "fixed" value on your table.
table {
table-layout: fixed;
width: 300px; /* your desired width */
}
After setting up the entire width of the table,
you can now setup the width in % of the td's.
td:nth-child(1), td:nth-child(2) {
width: 15%;
}
You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp
Can't modify <td> width; that is, column width isn't settable. You can add the styling white-space:nowrap; which might help. Or you can add s to add space to columns.
Maybe you could set col width the HTML way: <td width="70%">January>/td>
Unfortunately, in HTML 4.01 and later, that way isn't valid.
How about something like this...
http://jsfiddle.net/qabwb/1/
HTML
<div id="wrapper">
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
</div>
CSS
#wrapper {
min-width: 450px;
height: auto;
border: 1px solid lime;
}
.row {
padding: 4px;
}
.column {
border: 1px solid orange;
border-left: none;
padding: 4px;
display: table-cell;
}
.first {
border-left: 1px solid orange;
}
.longColumn {
min-width: 150px;
}