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
Related
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;
}
}
}
There is a wide table with table-layout: fixed. I'm trying to figure out how the width: min-content property should work for a cell of this table.
table {
table-layout: fixed;
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
.min {
width: min-content;
}
<table>
<thead>
<tr>
<th class="min">Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
</tr>
</tbody>
</table>
I get the desired result in Firefox, but not in Chrome. Is this a Chrome bug or am I doing something wrong?
If it's a Chrome bug, what's the workaround for getting the minimum width of the first column, given that I want to use table-layout: fixed and don't want to look for a fixed cell width like width: 30px?
My table cell has fixed width and contains select list and one or two buttons in a row. Select should fill all the space before buttons. I solved this with div wrapper, but my boss doesn't allow me to use any additional divs because from his point of view each element must symbolize some program data. He alsow doesn't allow me to use flexboxes.
Here's the code of how it should look like
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
#wrap {
overflow:hidden;
}
<table>
<tr>
<td>
<button>+</button>
<div id="wrap">
<select>
<option value>ttttttttt</option>
</select>
</div>
</td>
</tr>
</table>
Is there a way I can do this without additional elements or non-cross-browser solutions like flexboxes?
Try this option with help of inner table and without any additional wrappers. https://jsfiddle.net/xkLaq47m/
/---CSS---/
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
.inner-table{
margin: 0;
}
.inner-table__button-cell{
min-width: 15px;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
/*---HTML---*/
<table>
<tbody>
<tr>
<td>
<table class="inner-table">
<tbody><tr>
<td>
<select>
<option value="">ttttttttt</option>
</select>
</td>
<td class="inner-table__button-cell">
<button>+</button>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
I have a table with a fixed height and a variable number of tbody elements.
table {
border:1px solid black;
height:300px;
}
By default the page increases the height of the first tbody to fill the total height of the table (demo: http://jsfiddle.net/hvdcz8qr/). How can I have all the tbody elements stacked at the top of the table, and keep the extra height below the tbody elements?
Using elements other than table and tbody is not an option in my case.
[Update] I have added a second column to my example: http://jsfiddle.net/hvdcz8qr/10/
You can set the display of the tbody to block
table tbody {
display: block
}
Edit
Inorder to make the td use all the space:
table tbody tr {
display: flex;
}
td {
border:1px solid red;
display: block;
width: 100%;
}
New JSFiddle
After your comment in my suggestion try this:
table {
border: 1px solid black;
height: 300px;
}
td {
border: 1px solid red;
}
tbody {
float: left;
clear: left;
width: 100%;
display: inherit;
}
<table>
<tbody>
<tr>
<td>First tbody
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>second tbody
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>third tbody
</td>
</tr>
</tbody>
</table>
set width: 100% and display: inherit to take the whole table width.
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".