Adding ellipsis inside table cell without widths - html

I want to ellipsify the text in the second column without hard-coding a width for either of the two columns. Is this possible where only the parent element (table) has a fixed width?
table {
width: 100px;
border: 1px solid green;
}
.td1 {
border: 1px solid blue;
}
.td2 {
border: 1px solid red;
}
.td div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tr>
<td class="td1">Label:</td>
<td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td>
</tr>
</table>

You can do that within a nested table, I use a CSS table for the example, and added a span tag into the div for the table layout.
jsFiddle
table {
width: 200px;
border: 1px solid green;
}
.td1 {
border: 1px solid blue;
}
.td2 {
border: 1px solid red;
}
.td2 div {
display: table;
table-layout: fixed;
width: 100%;
}
.td2 span {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tr>
<td class="td1">Label:</td>
<td class="td2">
<div><span>thequickbrownfoxjumpsoverthelazydog</span></div>
</td>
</tr>
</table>

You need table-layout: fixed;
More info - https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
The CSS for the ellipsis part is ok, but what happens is that, by default, a table calculates its width based on the content width, so the table cell would be as wide as the content, and the text would never be collapsed. table-layout: fixed; changes that. It means the table will calculate the dimensions of the cells before inserting the content, then the content will not affect the table's dimensions when rendered.
The tradeoff is that your table will no longer balance the columns automatically:
table {
width: 100px;
border: 1px solid green;
table-layout: fixed;
}
.td1 {
border: 1px solid blue;
}
.td2 {
border: 1px solid red;
}
td div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tr>
<td class="td1">Label:</td>
<td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td>
</tr>
</table>

Related

How to make the table cell content-text according to its width?

enter image description here
I have a attach a img in which my td content has two values first value is set as float left and second float right. It there any way to increase the width to make the cells contents on the same line and overflow to extend cell width.
Below is my code
td,th{
white-space: nowrap;
width:auto;
}
.rightclass
{
float: right;
white-space: nowrap;
}
.leftclass
{
border:3px solid red;
border-top: 3px solid red;
border-bottom: 3px solid red;
float: left;
margin-left: 5px;
white-space: nowrap;
}
<td align="right" class="redcolor"> <span class="leftclass">(9223333333333333333322225789)</span><span class="rightclass"> 12345</span></td>

CSS Transform in Table Header Resizes Header Cell

I'm trying to display rotated text in a table cell. When I use rotate(), the table cells do not maintain their original widths unless I specify position: absolute. With that, the divs containing the text are misaligned as shown in the fiddle.
How is it possible that the text is shown outside of the table cell? How do I get it inside the table cells with using fixed width/height cells? I wasn't able to keep the cells their fixed width without the position: absolute.
JSFiddle: https://jsfiddle.net/jasoncable/f82h95gp/
Code :
.assignment-table {
height: 150px;
}
.assignment-table tr {
height: 150px;
}
.assignment-table tr td {
width: 50px;
height: 150px;
border: 1px solid black;
}
.assignment-table tr td div {
transform: rotate(-90deg);
font-size: 12px;
width: 150px;
height: 50px;
position: absolute;
}
<table class="assignment-table">
<tr>
<td>
<div>Grade in Marking Period<br>points/points</div>
</td>
<td>
<div>Assignment 1</div>
</td>
</tr>
</table>
You can adjust the transform-origin then apply a translation:
.assignment-table {
height: 150px;
}
.assignment-table tr {
height: 150px;
}
.assignment-table tr td {
width: 50px;
height: 150px;
border: 1px solid black;
}
.assignment-table tr td div {
transform: rotate(-90deg) translateX(-50%);
font-size: 12px;
width: 150px;
height: 50px;
position: absolute;
transform-origin: left top;
}
<table class="assignment-table">
<tr>
<td>
<div>Grade in Marking Period<br>points/points</div>
</td>
<td>
<div>Assignment 1</div>
</td>
</tr>
</table>

HTML combine border of two <a>

I have a table with multiple <a> elements within:
.TableClass td {
background-color: #050;
height: 150px;
}
.TableClass a {
background-color: #f00;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
Fiddle: https://jsfiddle.net/p937jbee/1/
Is there a way to avoid double borders?
UPDATE:
I can't change the HTML code and there are multiple <td> instead of 2 of my example.
Here is a solution for multiple cells:
You need to zero out the left border for all cells except first one
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
Have a look at snippet
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
}
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
https://jsfiddle.net/54o0efuv/
Just add a seperate class to one or both of the boxes where you remove the border ex. JSFIDDLE
a.one{
border-left: 0px;
}
html:
<a class="one" href="#"></a>
Seefiddle
Add CSS
.TableClass td:nth-child(2) a {
border-left:none;
}
This should work even if you have multiple elements and not just 2. https://jsfiddle.net/p937jbee/4/
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.TableClass td:first-child a {
border-right: 2px solid #000000;
}
.TableClass td:last-child a {
border-left: 2px solid #000000;
}
For a more consistant build-up I suggest to leave the right border, except for the last td. In case you'd like to add more blocks.
CSS
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass td a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
border-right: 0;
}
.TableClass td:last-of-type a {
border-right: 5px solid #000000;
}
border-collapse: collapse;
use this css
The border-collapse property is for use on elements (or elements made to behave like a table through display: table or display: inline-table).
The most straightforward method is to assign border-collapse:collapse to the table and to move the border property from the a elements to the tds. That is all you need to change.
.TableClass table {
border-collapse: collapse; /* new */
}
.TableClass td {
background-color: #005500;
height: 150px;
border: 5px solid #000000; /* moved */
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
.elem1{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
.elem2{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<td>
</td>
<td>
</td>
</table>
</div>
here is an updated fiddle, hopefully with be a solution for you
Quick answer:
You have to do 2 things, use the nth-of-type on a repeating element, in this case <td> and change how you write your brackets. :P - but really, you may need to say, every 2nd or third block - depending on how you do things. You may want to just use a list instead of a table - depending on the goal. :nth-of-type(2n+2) etc. Look her up. : )
HTML
<table cellspacing="0" cellpadding="0" class="table">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
CSS
.table a {
background: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.table td:nth-of-type(odd) a {
border-right: 2px solid black;
}
.table td:nth-of-type(even) a {
border-left: 2px solid black;
}
https://jsfiddle.net/6bgbmde5/
or you can use the background of the tr
.table tr {
display: block;
background: black;
padding: 4px;
}
.table a {
background: red;
width: 100px;
height: 100px;
display: block;
}
.table td:not(:last-of-type) a {
margin-right: 4px;
}
There are many ways that all have side-effects and it all depends on hovers and all sorts of stuff. Good luck!
Since OP has stated that they can-not change the HTML a hacky CSS solution must be implemented. Therefor I will use negative margins which many of you frown upon but I don't see any other options available.
Use the following CSS:
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
margin-left:-5px;
}
.TableClass td:nth-child(1) a {
margin-left:0px;
}

min-width for fluid column in fixed width table

I'm trying to create a table where a fluid column has a min width.
All other columns have a fixed width, and should not grow wider or thinner.
I can get the fluid column to grow and shrink correctly, so that it takes up the remaining space in container which sets the max width to 900px, however I can't get it to take a minimum width.
This means when the window and container are squashed, the fluid column gets covered, rather than behave like the fixed columns at this point.
Applying a min-width to the th and/or td doesn't do anything.
Applying a min-wdith to the div inside the fluid td does mean the text has a minimum width, however it doesn't stop the column from shrinking to less than this minimum, so the text is underneath the next column's text.
Any ideas?
HTML:
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>
CSS:
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
table th, table td {
border-top: 1px solid #333;
}
JSfiddle:
http://jsfiddle.net/ajcfrz1g/14/
DEMO
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
min-width: 500px;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: 100%;
min-width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
width: 100%;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
i am trying to solve your problem. in this your fluidhas no min-width because this is table structure. but you can give width.
see this example
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
white-space: nowrap;
overflow: hidden;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>

Force table column to not excess given css width

HTML
<table >
<tr>
<td>veeeeeeeeeeeeeeeeeeeeery looong</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
CSS
table {
width: 80px;
}
td {
overflow: hidden;
max-width: 25%;
width: 25%;
}
I want every column to be 25% of 80px, thus 20px in size. How do I stop the first column from getting larger (its content can be hidden).
You could use table-layout: fixed
table {
width: 80px;
border: 1px solid #333;
table-layout: fixed;
}
td {
overflow: hidden;
max-width: 25%;
width: 25%;
border: 1px solid #333;
word-wrap: break-word;
}
An example: http://jsfiddle.net/wsastn47/1/
edit: #mevius suggestion word-wrap: break-word;
I would suggest the following:
table {
width: 80px;
}
td {
width: 25%;
border: 1px dotted blue;
word-break: break-all;
}
Use the word-break property to allow the long text strings to wrap within the table
cell and remain visible.
See demo: http://jsfiddle.net/audetwebdesign/7ptrtwac/
Note: The max-width property is not needed for td.
You can use the following CSS as well :
table {
width: 180px;
border-collapse:collapse;
table-layout:fixed;
}
td {
overflow: hidden;
max-width: 25%;
width: 25%;
word-wrap:break-word;
border:solid 1px;
}
Demo link DEMO FIDDLE