I'm putting together a table where I want the first element of the row if the text is too long should be shortened. For that I use
#name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
I have this table and just want "me" you can use the abbreviation text should be very long
#name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
<table style="width:100%">
<thead>
<tr>
<th id="name" style="width:20%">Test name test name test name</th>
<th id="number">547821365</th>
<th id="address">test #10900</th>
</tr>
</thead>
</table>
But this does not work, always the first element is enlarged depending on the text and interrupts my other columns.
You can add float:left to your name css class. Here is my fiddle- https://jsfiddle.net/rahulpandey034/oxxnpuo2/
#name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
float: left;
}
<table style="width:100%">
<thead>
<tr>
<th id="name" style="width:20%">Test name test name test name</th>
<th id="number">547821365</th>
<th id="address">test #10900</th>
</tr>
</thead>
</table>
Related
I have the following table
<table>
<tr>
<td>Long name name name name name name</td>
</tr>
<tr>
<td>Some shorter</td>
</tr>
</table>
and my css
table {
border: 1px solid black;
}
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i needed to have elipsis on my table so that is why i used max-width: 100px; together with white-space: nowrap;
But the problem here is that i need my td to have fixed with
td {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
if i do this than my td has fixed width but i lose the elipsis. Is there some way with which i can do this ?
Use table-layout:fixed;
table {
border: 1px solid black;
width:100%;
table-layout:fixed;
}
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tr>
<td>Long name name name name name name Long name name name name name name Long name name name name name name Long name name name name name name Long name name name name name name</td>
</tr>
<tr>
<td>Some shorter</td>
</tr>
</table>
You can achieve this using -webkit-line-clamp.
You can read more about the prerequisites here
table {
border: 1px solid black;
}
td {
max-width: 100px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
<table>
<tr>
<td>Long name name name name name name</td>
</tr>
<tr>
<td>Some shorter</td>
</tr>
</table>
Hi I want to display only few text in a html column and remaining to expand only if it is expanded by the user.
All in a single line how do I do it.(as shown in below screenshot)
Below is my code
<table style="border-style: solid;
white-space: pre;
overflow: hidden;
word-wrap: break-word
text-overflow: ellipsis;
border-color: 000708; background-color: 000708;" border="3">
<tbody>
<tr bgcolor="#18C1C1">
<td style="text-align: center; width: 107.588px;"><strong> Tree</strong></td>
<td style="text-align: center; width: 84.275px;"><strong> ID</strong></td>
<td style="text-align: center; width: 81.975px;"><strong> S</strong></td>
<td style="text-align: center; width: 3899.98px;"><strong>Text</strong></td>
<td style="text-align: center; width: 158.688px;"><strong> Name</strong></td>
</tr>
<tr>
<td style="width: 107.588px;">113</td>
<td style="width: 84.275px;">113</td>
<td style="width: 81.975px;">0</td>
<td style="width: 3899.98px;">This s a test and this should not expand after a fixed length --?></td>
<td style="width:
158.688px;">Test</td>
</tr>
</tbody>
</table>
If you don't mind using jQuery then you can give jQuery Resizable a try. jQuery UI Resizeable will allow resizing the element by the user and the CSS will help to hide the text properties rather than moving to the next line.
I also added a unique ID property to the table, keep that in mind if you have multiple tables and act accordingly.
Note: Table headers are draggable here.
$("#myTable thead th").resizable({
handles: "e" //To specify where the drag handles will be placed on the resizable element.
});
table {
table-layout: fixed;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
table th {
white-space: nowrap;
overflow: hidden;
}
table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table id="myTable" style="border-style: solid;
overflow: hidden;
word-wrap: break-word
text-overflow: ellipsis;
border-color: 000708; background-color: 000708;" border="3">
<thead>
<tr bgcolor="#18C1C1">
<th ><strong> Tree</strong></th>
<th ><strong> ID</strong></th>
<th ><strong> S</strong></th>
<th ><strong>Text</strong></th>
<th ><strong> Name</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td >113</td>
<td >113</td>
<td >0</td>
<td >This s a test and this should not expand after a fixed length --?></td>
<td >Test</td>
</tr>
</tbody>
</table>
Check out text-overflow property
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
I want an ellipsis to appear whenever the text gets cut off when the width of the table cell is too narrow to display it. According to CSS Tricks, it's supposed to look as below (nothing surprising there).
td {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
However, I can't make it work. First I thought it was because I'm applying Bootstrap and there might be some styling poofing my approach but then I tried to reproduce the error in an isolated fiddle and - tada! - I got it working. (I.e. I got it to fail ellipting, hence got the reproducible error to succeed occurring.)
The fiddle is here. What am I missing?!
Solution 1
Table cells don't handle overflow well. You will need to set the max-width CSS property on each td for the overflow to work. Try to make use of max-width instead of width
The max-width CSS property sets the maximum width of an element.
It prevents the used value of the width property from becoming larger
than the value specified by max-width.
body {
font: 13px Verdana;
}
td {
background-color: pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50px;
}
<table class="table">
<thead>
<th>Name</th>
<th>Alias</th>
<th>Location</th>
<th>Updated</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td>Ali Baba & Co.</td>
<td>Boys 'n da hood</td>
<td>Somewhere over the rainbow</td>
<td>February 30th</td>
<td>Do stuff!</td>
</tr>
</tbody>
</table>
Solution 2
Or Just place the td content inside <span> and then apply the css
body {
font: 13px Verdana;
}
span {
background-color: pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: block;
}
.table {
width: 100%;
table-layout:fixed;
}
<table class="table">
<thead>
<th>Name</th>
<th>Alias</th>
<th>Location</th>
<th>Updated</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td><span>Ali Baba & Co.</span></td>
<td><span>Boys 'n da hood</span></td>
<td><span>Somewhere over the rainbow</span></td>
<td><span>February 30th</span></td>
<td><span>Do stuff!</span></td>
</tr>
</tbody>
</table>
I have this table that I want to spruce up a bit, but am having no succes despite the solutions I have found all across Stackoverflow.
I am using PHP to echo the table, with some some data from an SQL db.
As you can see in the bottom right, the browser does not see the styling I have added for overflow etc..
Below is the html:
<div class="span9">
<div class="container">
<a class="btn" href="records.php">Add New Record</a><br><br>
<table class="table table-hover table-condensed" border="1" cellpadding="10">
<tbody>
<tr>
<th class="th.id">ID</th>
<th class="th.status">Status</th>
<th class="th.cust">Customer</th>
<th class="th.prod">Product</th>
<th class="th.ord">Order Number</th>
<th class="th.ret">Return Code</th>
<th class="th.dop">Date of Purchase</th>
<th class="th.sn">Serial Number</th>
<th class="th.prob">Problem Description</th>
<th class="th.rep">Repair Description</th>
<th class="th.part">Parts Used</th>
<th class="th.com">Comments</th>
</tr>
<tr>
<td><p>1</p></td>
<td><p>Error!</p></td>
<td><p>Jesse</p></td>
<td><p>Fuse</p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p>ComicalCanary</p></td>
<td><p>Not enough sand</p></td>
<td><p>Added sand</p></td>
<td><p>sand 10kg</p></td>
<td><p>I want to put a lot of content into this, to see how far this will go in stretching the table.</p></td>
</tr>
</tbody>
</table>
</div>
And below is my css, i'm using Bootstrap 3.3.7, but this is what I'm adding:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
table-layout: fixed;
}
.table td {
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
And even the width: 120px; is not even working...
Any clues anyone?
You have to move your ellipsis styling down to the p tag.
.table p {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
https://jsfiddle.net/koralarts/y6q3uvkL/1/
Set the max-width on your td css or put a div inside the td with the ellipsis on the div instead. Or set the p width to a fixed number and put the text overflow rule on that.
Table cells are a bit difficult in this regard, text overflow works with block elements (p, div, etc) in the inline direction. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Move both overflow: hidden; and text-overflow: ellipsis; from .table td to a new rule for .table td p, like
.table td {
width: 120px;
white-space: nowrap;
}
.table td p {
overflow: hidden;
text-overflow: ellipsis;
}
Here's the whole thing in a codepen: https://codepen.io/anon/pen/dJPgNZ
Hey I was wondering if you can have a HTML table and make certain columns have whitespace: nowrap and the other columns that have whitespace: normal?
Example:
<table>
<thead>
<tr>
<th>No wrap</th>
<th>Wrap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small text</td>
<td>Wrap this longgggg text</td>
</tr>
</tbody>
</table>
CSS white-space is normal by default, so all you need is to set it to nowrap for some of the columns. One way is to add a class to them, as:
<td class="my_nowrap">this won't wrap</td>
<style>
.my_nowrap {
white-space: nowrap;
}
</style>
Other way would be to use CSS3 nth-child selector and (without setting classes) target some of the columns, as:
<style>
td:nth-child(2),
td:nth-child(3) {
.my_nowrap {
white-space: nowrap;
}
</style>
The above would set 2nd and 3rd column to nowrap.
Yes this is possible. Take a look at the example below.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
tr.wrap {
width: 50px;
}
th.wrap, td.wrap {
background: red;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 10px;
}
<table style="width:100%">
<tr>
<th class='wrap'>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td class='wrap'>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>