Demo: http://jsfiddle.net/zvmcyp4w/
.wide {
width: 400px;
background: lightblue;
}
.narrow {
width: 200px;
background: lightpink;
}
.table-responsive {
max-width: 100%;
overflow-x: auto;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
<div class="wide">
<div class="table-responsive">
<table>
<tr>
<td>Many words</>
<td>word</td>
<td>oneword</td>
<td>onemoreword</td>
</tr>
</table>
</div>
</div>
<div class="narrow">
<div class="table-responsive">
<table>
<tr>
<td>Many words</>
<td>word</td>
<td>oneword</td>
<td>onemoreword</td>
</tr>
</table>
</div>
</div>
I'm simulating a responsive layout with "wide" and "narrow" containing the same table.
In "narrow" you can scroll left and right.
If the content of a cell is made out of multiple words, like the first cell, it automatically breaks into lines.
What I'm looking for is to avoid breaking the line and have the cell expand horizontally to accommodate its content, given that the content is dynamic therefore no fixed widths or min-widths allowed.
Ideally a clean CSS only solution would be great, I already know how to solve it with JavaScript.
So you want multiple words not to expand on multiple rows? You can use white-space property
.narrow table td{
white-space:nowrap
}
jsfiddle
Add white-space: pre to the table cells:
td {
border: 1px solid black;
padding: 5px;
white-space: pre;
}
Updated Fiddle.
You could adjust the td styles to include white-space: nowrap;
td {
border: 1px solid black;
padding: 5px;
white-space: nowrap;
}
Also, a couple of your td elements had malformed closing tags.
http://jsfiddle.net/zvmcyp4w/2/
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.
I'm trying to put two images side by side in a table and have the following behavior on the first image:
Have it be right up against the bottom of the table, so the bottom border is overlapping with the bottom border of the table.
Have no right margin or padding, so it is right against the second image (so the right border of the first image is overlapping with the left border of the second image).
To solve the first thing I'm using valign="bottom" but that doesn't seem to fully work.
To solve the second issue I'm using padding-right:0px; margin-right:0px; but that doesn't work either.
Can anyone help me achieve the behavior I'm going for please? Note that I'm using a table because I have other things in this table, I just took them out to simplify the question.
table {
border: 1px solid black;
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg > img {
border: 1px solid red;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg" valign="bottom">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V"></img>
<td>
<td valign="bottom">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg"></img>
<td>
</tr>
</table>
Below you can see two tricks that should work for you. In first I've made td to be display: flex with two alignments. ;). In second I used inside div element with flex, so to not change default display: table-cell for td element. I've also fixed typos in tags you used.
table {
border: 1px solid black;
}
.benderImg {
display: flex;
align-items: flex-end;
justify-content: flex-end;
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg>img {
border: 1px solid red;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
</td>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
</td>
</tr>
</table>
table {
border: 1px solid black;
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg>div>img {
border: 1px solid red;
}
.benderImg > div {
display: flex;
align-items: flex-end;
justify-content: flex-end;
height: 100%;
width: 100%;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
</div>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
</td>
</tr>
</table>
First, you are using obsolete attributes, which is not recommended. Besides, some of the attributes try to set different values than the properties in the CSS, which is a no-no. Replace them all with CSS properties.
Secondly, the vertical align property should be on the img rather than on the td.
Then the distance between the two images; the second image has no border or margin, and neither does its td, so I'm not sure why you think there should be some spacing in between. I put a left padding on the td; you can change that to fit your needs.
And finally, </img> is unnecessary; not allowed even, since <img> is a void element. You can end the <img> tag with a slash if you want.
table {
border: 1px solid black;
width: 666px; /* css replacement for width attr */
border-spacing:0; /* css replacement for cellspacing attr */
}
td {
padding:0; /* css replacement for cellpadding attr */
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg > img {
border: 1px solid red;
vertical-align:bottom;
}
.benderImg + td {
padding-left:5px;
}
<table>
<tr>
<td class="benderImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" alt="" />
<td>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" alt="">
<td>
</tr>
</table>
For the second issue, I fixed it by just using align="right" on the first image's td. The first issue was fixed with a vertical-align: bottom on the first image.
I am trying to get a horizontal line to stretch between the first and last columns in a table but I need the first and last columns to wrap if the text is long. The only way I have found to get the desired effect is to use width:100%; on the middle column, and white-space:nowrap; on the first and last, but I need to find another way as I need the text to wrap when there isn't enough space. Is there a way to achieve this effect in plain CSS?
https://jsfiddle.net/macu/8axk5qv5/4/
table {
width: 100%;
}
td {
vertical-align: middle;
white-space: nowrap;
}
td:nth-child(2) {
width: 100%;
}
.line {
border-top: thin solid blue;
}
<table>
<tr>
<td>Title cell with a long title that should wrap</td>
<td><div class="line"></div></td>
<td>Another cell, should wrap</td>
</tr>
</table>
If the text is long enough there should be no line, and the text should wrap normally:
You can put a span or div in each cell, and make them to use white background, then set the line on the table row to create such layout visually.
Check out the fiddle demos below, so you can easily resize and see the wrapping text.
jsFiddle
.table {
width: 100%;
border-collapse: collapse;
}
.table tr {
background: linear-gradient(blue, blue) center/99.99% 1px no-repeat;
}
.table div {
background: white;
display: inline-block;
}
.middle div {
min-width: 100px; /*remove or adjust value as need*/
}
.last {
text-align: right;
}
<table class="table">
<tr>
<td class="first">
<div>Title cell with a long title that should wrap</div>
</td>
<td class="middle">
<div><!-- This td can be removed if no min-width needed --></div>
</td>
<td class="last">
<div>Another cell, should wrap</div>
</td>
</tr>
</table>
But using flexbox can make it much easier, if you don't have to use table.
jsFiddle
.container {
display: flex;
}
.line {
background: linear-gradient(blue, blue) center/1px 1px repeat-x;
flex: 1;
min-width: 100px; /*remove or adjust value as need*/
}
<div class="container">
<div>Title cell with a long title that should wrap</div>
<div class="line"></div>
<div>Another cell, should wrap</div>
</div>
try by removing the white-space: nowrap; on the TD tag, then target the first and the third TD with
td {
vertical-align: middle;
//white-space: nowrap;
}
td:nth-child(1),td:nth-child(3) {
//add whatever min-width AND max-width so it could be something like this
min-width:150px;
max-width:300px;
}
see if that helps.
I have an example of the problem here:
http://jsfiddle.net/s6t3p/
I have the following markup:
<h1>Just Text</h1>
<table>
<tr>
<td class='cell'>Some Text</td>
<td class='cell'>More Text</td>
</tr>
</table>
<h1>With Icon Cell</h1>
<table>
<tr>
<td class='cell'>Some Text</td>
<td class='cell-ico'><div class='ico'></div></td>
<td class='cell'>More Text</td>
</tr>
</table>
And the following CSS:
table,td,tr
{
margin: 0; padding: 0;
border: none; outline: none;
font-size: 100%; font: inherit;
vertical-align: baseline;
}
table { border-collapse: collapse; border-spacing: 0;}
.cell
{
border:solid 1px #DDD; padding:0 5px; text-align:left;
line-height:27px;
}
.ico {width:24px; height:24px; background:#05F;}
I wish for each cell to be 27px in height. This is the case for the 1st table. But the second table which contains a cell with a 24px div has a height of 32px. I don't understand why. It seems like a 24x24 div should fit inside fine without increasing the cell height.
Can anyone explain why this is happening and how to fix it so that I can keep the cells at a height of 27px? I am currently testing with FireFox 29.
Thanks for any help.
If you are looking to display tabular data, then this is the way to go :)
The behaviour is caused by vertical-align: baseline;.
Just reset the vertical-align for .cell-ico and provide a set height. Give .ico a height of 100%.
Have a fiddle
.cell-ico {
height: 24px;
vertical-align: top;
}
.ico {
width:24px;
height: 100%;
background:#05F;
display: block;
}
try to add this inside your CSS
td{
vertical-align:middle;
height:27px;
}
Looks like vertical-align: baseline; applied to all tags table, tr, td is messing it up.
Remove it and try it out.
I'd suggest you use div elements with their respective display attributes set to either table, table-row, table-cell, etc. Instead of actual tables. The use of tables as a layout techique is discouraged since HTML4. This approach may be a little bulky, but for layout purposes it'll save you some trouble dealing with css.
Check this jsfiddle for example:
HTML:
<div id="Table">
<div class="row">
<div class="cell">Lorem ipsum</div>
<div class="cell">Lorem ipsum</div>
</div>
<div class="row">
<div class="cell">Lorem ipsum</div>
<div class="cell">Lorem ipsum</div>
</div>
</div>
<br/>
<br/>
<div id="Table">
<div class="row">
<div class="cell2"><div class="oddDiv">im inside a div</div></div>
<div class="cell2">Lorem ipsum</div>
</div>
<div class="row">
<div class="cell2">Lorem ipsum</div>
<div class="cell2">Lorem ipsum</div>
</div>
</div>
CSS:
#Table {
display: table;
width: 200px;
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid blue;
height: 27px;
}
.cell2 {
display: table-cell;
border: 1px solid red;
height: 24px;
}
.oddDiv {
height: 24px;
width: 24px;
overflow: hidden;
}
Update, regarding semantics:
It's true that from a developer's point of view there's no difference between a table markup element and a generic container like a div with the appearance of a table in terms of layout and even code comprehension. But, there's no way for an accessibility tool, say, an screen reader, to discern between a bunch of div elements with different id's, unless the tool was proprietary or there was some kind of convention for special id's to use for this kind of purposes (which I doubt). So for layout purposes divs are the way to go, but if semantics are a concern, the use of tables is the best solution.
I have a fixed-width table of 400px with 3 columns.
<table>
<tbody>
<tr>
<td class="wide">This is really really long and as much as possible should show but should eventually be cut off.</td><td class="narrow">Small1</td><td class="narrow">Small2</td></tr>
</tbody>
</table>
Here is the CSS.
table
{
table-layout: fixed;
width: 400px;
}
td
{
border: 1px solid #000;
white-space: nowrap;
}
td.wide
{
overflow: hidden;
text-overflow: ellipsis;
}
td.narrow
{
}
Here is the JSFiddle.
Currently, each of the 3 columns takes up 1/3 of the space. What I want is for the 2nd and 3rd columns to be as small as possible (without anything hidden or text-wrapped) and have the 1st column take up the remainder of the space (with any text that doesn't fit being hidden).
Depending on the data displayed, the 2nd and 3rd columns may need to be wider or narrower to fit their content, so I don't want to define a fixed size for any column.
Is this possible?
Here is the only solution i found. It's pretty ugly but it does the trick :
http://jsfiddle.net/XA9kY/
The thing is to wrap the string to be overflowing into a .... table
Notice the table into the td.wide
<div style="width:400px; border: 1px solid red;">
<table>
<tbody>
<tr>
<td class="wide">
<table>
<tr>
<td>This is really really long and as much as possible should show but should eventually be cut off.
</td>
</tr>
</table>
</td>
<td class="narrow">Small1</td>
<td class="narrow">Small2</td>
</tr>
</tbody>
</table>
</div>
And here is the magic
td.wide table
{
width: 100%;
table-layout: fixed;
}
td.wide table td
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Just wrapping the string into a table with table-layout: fixed; property does the trick.
Here's my try at this: (Example)
<table>
<tbody>
<tr>
<td class="wide">This is really really long and as much as possible should show but should eventually be cut off.</td>
<td class="rest">Small1</td>
<td class="rest">Small2</td>
</tr>
</tbody>
</table>
CSS
table {
width: 400px;
}
table td {
border: 1px solid #000;
}
td.rest {
width:1px;
}
The only thing is that it doesn't like:
overflow: hidden;
text-overflow: ellipsis;
If that isn't an issue then this should work.
EDIT
A possible solution to hide the text in the wider cell by just setting the height.
Added also the line-height for all the cells so you can change both based on the settings you're after.
Here the (Example)
table {
width: 400px;
}
table td {
border: 1px solid #000;
line-height:26px;
}
td.rest {
width:1px;
white-space: nowrap;
}
td.wide {
overflow:hidden;
height:26px;
display:block;
}