td:nth-child(1) {
max-width: 130px !important;
div {
a {
max-width: 120px !important;
outline: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
text ellipsis is not working , i tried using ellipsis inside td in table. it seems to work when width is not specified and ellipsis is applied in td(parent contaienr) i used width too still it dosent work
Make it "display: inline-block"
td div a {
display: inline-block;
width: 60px;
outline: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<tr>
<td>
<div><a>Make it "display: inline-block"</a></div>
</td>
</tr>
</table>
You can use a couple of methods
Use display: block or display: inline-block to the a tag.
Provide float: left or float: right to the a tag.
Don't forgot to provide a fixed width or max-width to one of it's parent container.
/* using display: inline-block or dislay: block */
td:nth-child(2)>div {
max-width: 300px;
}
td:nth-child(2)>div>a {
width: 100%;
display: inline-block; // or block;
outline: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>
<div>Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content dfidjfdfd</div>
</td>
</tr>
</tbody>
</table>
/* using float: left and float: right */
td:nth-child(2)>div {
max-width: 300px;
}
td:nth-child(2)>div>a {
width: 100%;
float: left; // or right
outline: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>
<div>Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content dfidjfdfd</div>
</td>
</tr>
</tbody>
</table>
give width to perent so it will prevent the text to go out of the box, you are trying to set width to text so it can't be overflowed.
td:nth-child(1) {
div {
width:125px;
a {
outline: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
Related
As you can see, in order to make the entire table cell link-clickable, I used td a {display: block}. The problem is td a {vertical-align: middle} no longer works with display: block. Not sure how else to center it vertically. Any help would be greatly appreciated.
P.S. I avoided using line-height because my link needs to be multi-line.
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: block;
height: 100px;
vertical-align: middle !important;
}
<table>
<tr>
<td>TEXT</td>
<td>LINK</td>
</tr>
</table>
You can use an auxiliar span and center it inside the anchor, so its content is free to move and align.
E.g.:
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: flex;
height: 100%;
}
td a span {
height: fit-content;
align-self: center;
}
<table>
<tr>
<td>TEXT</td>
<td>
<a href="">
<span>
A VERY LONG LINK MAY BE LIKE THIS ONE, I GUES, RIGHT? HERE WE GO :D
</span>
</a>
</td>
</tr>
</table>
Added span in anchor tag and made a CSS change for the output
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: table;
position: relative;
height: 100%;
width: 100%;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
}
<table>
<tr>
<td>TEXT</td>
<td><span>LINK</span></td>
</tr>
</table>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
The title says it all:
Using only CSS, How can I apply some padding to all td elements, except those with children elements of input or select types, which I'd like to have another padding for?
Note that I'd like as generic solution as possible (e.g., no hardcoded inline style), so the first thing that came in mind was to try and do this:
td:not(:has(input, select)), but it's not possible.
For example, in the following table (here's also a fiddle), I'd like all td elements to have padding-left and padding-right of 20px, but those with input or select elements to be with padding of 2px:
table {
width: 100%;
border-collapse: collapse;
}
td {
text-align: center;
vertical-align: middle;
white-space: nowrap;
border: 1px solid #ddd;
font-size: 16px;
font-family: arial;
padding-right: 20px;
padding-left: 20px;
}
input, select {
text-align: center;
vertical-align: middle;
font-size: 16px;
}
.fit {
white-space: nowrap;
width: 1%;
}
<table id="myTable" class="fit">
<tr>
<td>some</td>
<td>nice</td>
<td>text</td>
</tr>
<tr>
<td>
<input value="some"/>
</td>
<td>nice</td>
<td>
<select>
<option>option</option>
</select></td>
</tr>
</table>
You could apply a negative margin to input and select.
Subtract a total of 36px to give you 2px each side
table {
width: 100%;
border-collapse: collapse;
}
td {
text-align: center;
vertical-align: middle;
white-space: nowrap;
border: 1px solid #ddd;
font-size: 16px;
font-family: arial;
padding-right: 20px;
padding-left: 20px;
}
input,
select {
text-align: center;
vertical-align: middle;
font-size: 16px;
margin-left: -18px;
margin-right: -18px;
}
.fit {
white-space: nowrap;
width: 1%;
}
<table id="myTable" class="fit">
<tr>
<td>some</td>
<td>nice</td>
<td>text</td>
</tr>
<tr>
<td>
<input value="some" />
</td>
<td>nice</td>
<td>
<select>
<option>option</option>
</select></td>
</tr>
</table>
I have a table that is using an ellipsis but I'm stuck with conflicting arguements. The scenario is a I have a table with a tr tag and 2 td's. I need the first td to be the width of the text ( border-collapse: collapse ) which is fine, BUT, I need the width of the table to be 100% so in the 2nd td I can use the ellipsis. I haven't found a way to to border-collapse the first td and have the 2nd be used as an ellipsis.
http://jsfiddle.net/epywtvjf/2/
<table>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
</table>
table{
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
table td{
white-space: nowrap;
border: none;
line-height:unset;
padding: 0px;
text-align: left;
}
You may need to add display flex to your tr. The following css worked for me.
table {
table-layout: fixed;
border-collapse: collapse;
width:100%;
}
tr{
display: flex;
}
td{
white-space: nowrap;
border: none;
padding: 0px;
text-align: left;
border-collapse: collapse;
}
#td2 {
overflow:hidden;
text-overflow: ellipsis;
}
http://jsfiddle.net/krewn/opputmg3/1/
You can specify specific css for each individual td by adding a class to the td in the html and then using the . class selector in css.
<table>
<tr>
<td class="col1">This is the first div.
</td>
<td class="col2">This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
</table>
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td{
white-space: nowrap;
border: none;
padding: 0px;
text-align: left;
border-collapse: collapse;
overflow: hidden;
}
.col2 {
text-overflow: ellipsis;
}
http://jsfiddle.net/krewn/qcypz5xk/
Changing table-layout: fixed and overflow:hidden?
Will that solve your issue?
here
Problem
I have a fixed width table (which it must be) and one of the cells contains text
that is too long to fit within it, so it overflows outside the cell to the right.
I need to have all the table cells' text to be aligned to the right.
I ideally don't want to change any of the markup.
What I'm Looking For
I'm in need of finding someway for the (text in the example) "longlonglong" to overflow to the left over the other previous cells and maintain it's aligned right state.
Code
HTML
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">very longlonglong text</td>
</tr>
</table>
CSS
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Example
http://jsfiddle.net/xareyo/eVkgz/
See http://jsfiddle.net/eVkgz/1/
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">
<div id="container1">
<div id="container2">very longlonglong text</div>
</div>
</td>
</tr>
</table>
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
#container1 {
width: 30px;
position: relative;
}
#container2 {
float: right;
overflow: visible;
text-align: right;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Do you need a variable height of the cells?
If not:
Place a div inside the td and this CSS:
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
position: relative;
}
td div {
position: absolute;
right: 0;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Add word-break: break-all; to yours td style:
td {
word-break: break-all;
text-align: right;
border: 1px solid black;
vertical-align: top;
}
I am trying to set the width of a TD to 50% in Firefox.
IE works fine.
table.tablelist
{
width: 100%;
border-collapse: collapse;
display: block;
}
.tablelist tr
{
border-bottom: 1px solid black;
}
.tablelist td
{
width: 50%;
}
<table class="tablelist">
<tbody>
<tr>
<td>
African
</td>
<td>
Jungle
</td>
</tr>
</tbody>
</table>
Firefox seems to ignore the width of the TD when set to a percentage value.
if I set the width to 200px then it will work fine.
What am I missing?
Remove display: block; from table.tablelist
Try "min-width" instead of "width".