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;
}
Related
I am trying to create a profile box where the user would be able to see his own profile picture, and other account specific information and utilities, like their username, settings button, profile page button, etc. The way I went about doing this was with a table element centered using flex. Then, I colored the backgrounds of my divs to see what they are doing. I noticed white lines between the cells of my table, tried some things, did some research, found the border-collapse attribute, and used it. Problem is, only some of my lines went away, as shown in the picture below. Weirder enough, it seems to disappear when I zoom in and out using ctrl + scroll. My guess is that it's some sort of rounding error.
What to do?
.Leftside2 {
flex: 20%;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
}
#profile_picture {
height: 100%;
padding: 5px;
background-color: orange;
display: flex;
justify-content: center;
}
#profile_picture img {
width: 80%;
height: 80%;
}
.friend_list {
width: 90%;
}
<div class="Leftside2">
<table class="profile">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="https://via.placeholder.com/450x400"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
Edit: I tried putting cellpadding="0" and cellspacing="0" inside my and it didn't work. I also tried to explicitly state that margin = 0, padding = 0 in all table elements. I do not think that it's a margin/padding issue, as many have suggested below.
Edited code:
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.profile td {
padding: 0;
margin: 0;
}
Second edit:
<html lang = "en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Find a Friend</title>
</head>
<body>
<div class="HeaderMenu">
<div style="margin-left:40px;margin-right:100px;background-color: #008aed;">
<button class="logout_button">Logout</button>
</div>
</div>
<div class="row">
<div class = "left_space"></div>
<div class="Leftside2">
<table class="profile" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="../img/placeholder.png"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
<div class="Centerside2">
</div>
<div class="Rightside2">
</div>
<div class = "right_space"></div>
</div>
</body>
.profile td {
padding: 0;
}
adding this to your css should solve the problem. or you can add cellpadding="0" in your html table tag.
just adding attribute cellpadding="0" in your table tag will fix your issue.
Try adding this to your table tag:
cellspacing=“0”
Padding refers to the space inside the cell. Cell spacing is about how much space there is outside it.
Here is my current situation: https://jsfiddle.net/rhercb/a4b2L95n/
Code:
.house_info_table {
width: 100%;
}
.house_info_table td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table class="house_info_table">
<tr>
<td class="">TEST DU:</td>
<td class="">xxxxxx</td>
</tr>
<tr>
<td>TEST DU:</td>
<td>xxxxxx</td>
</tr>
<tr>
<td>Awailable thing here:</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>TEST DU:</td>
<td>xxxxx</td>
</tr>
<tr>
<td>TEST DU:</td>
<td>xxxxxxxxx</td>
</tr>
</table>
I can only get both of these columns to shrink, but i need my 1st one to stay like that and not to bounce text in other row, and my 2nd one to show ellipsis when i shrink the page.
You can use the nth-child pseudoselector:
.house_info_table td {
max-width: 0;
overflow: hidden;
white-space: nowrap;
}
.house_info_table td:nth-child(2) {
text-overflow: ellipsis;
}
Read more here
I've used the min-width together with width. Is this what you want?
.house_info_table {
width: 100%;
}
.house_info_table td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.first-part {
min-width: 140px;
width: 150px;
}
<table class="house_info_table">
<tr>
<td class="first-part">TEST DU:</td>
<td class="">xxxxxx</td>
</tr>
<tr>
<td class="first-part">TEST DU:</td>
<td>xxxxxx</td>
</tr>
<tr>
<td class="first-part">Awailable thing here:</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td class="first-part">TEST DU:</td>
<td>xxxxx</td>
</tr>
<tr>
<td class="first-part">TEST DU:</td>
<td>xxxxxxxxx</td>
</tr>
</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
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>
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>