Clip long text inside HTML table cells, show entire content on hover - html

I have a table html table which has a column named "address". The address contains very long strings. What I want is I only want to show first 2 or 3 words of the address and when I hover over it, it should show full address. How can I do this with html table?


Solution:
Use table-layout: fixed so that your table columns maintain fixed size
Wrap the content inside div elements and manipulate width and overflow properties
/*
* fixed table layout
*/
table {
table-layout: fixed;
width: 400px;
font: larger monospace;
border-collapse: collapse;
}
th:nth-child(1) {
width: 20%;
}
th:nth-child(3) {
width: 20%;
}
/*
* inline-block elements expand as much as content, even more than 100% of parent
* relative position makes z-index work
* explicit width and nowrap makes overflow work
*/
div {
display: inline-block;
position: relative;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
/*
* higher z-index brings element to front
* auto width cancels the overflow
*/
div:hover {
z-index: 1;
width: auto;
background-color: #FFFFCC;
}
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>John Smith</div></td>
<td><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></td>
<td><div>1-234-567890</div></td>
</tr>
<tr>
<td><div>Jane Doe</div></td>
<td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
<td><div>1-234-567890</div></td>
</tr>
</tbody>
</table>


.cell {
max-width: 50px; /* tweak me please */
white-space : nowrap;
overflow : hidden;
}
.expand-small-on-hover:hover {
max-width : 200px;
text-overflow: ellipsis;
}
.expand-maximum-on-hover:hover {
max-width : initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th>
ID
</th>
<th>
Adress
</th>
<th>
Comment
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td class="cell expand-maximum-on-hover">
A very, very long adress that cannot be showed entirely
</td>
<td class="cell expand-small-on-hover">
A very, very long comment to add more information to the row it belongs to.
</td>
</tr>
</tbody>
</table>
You might begin from there, this is an example of how to use max-width combined with overflow : hidden.
Pass hover the adress cell to see the result


Using Tootips gives a solution,
<html>
<table border="1" >
<tr>
<td>A</td>
<td><abbr title="Ab df df dfdf df dfdkjf sdfk dfdf">Ab df df</abbr> </td>
</tr>
<tr>
<td>B</td>
<td><abbr title="Bb df df dfdf df dfdkjf sdfk dfdf">Bb df df</abbr> </td>
</tr>
</table>
</html>

Related

How to access specific div inside td and showing different background color when hovering

I have a table and in my td, I will have div. I need know how let user see different color when hovering at specific div
My code
<div className="table-responsive">
<table className="table table-responsive table-hover table-condensed returnSpreadIndex">
<thead>
<tr>
<th>Period/Range</th>
<th>n30</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="hover1"> // LET SAY USER HOVER THIS DIV, WILL SHOW YELLOW COLOR
Apple1
</div>
<div class="hover2"> // IF USER HOVER THIS DIV, WILL SHOW ORANGE COLOR
pineApple1
</div>
</td>
<td>testing purpose</td>
</tr>
<tr>
<td>test</td>
<td>
<div>
Apple2
</div>
<div>
pineApple2
</div>
</td>
</tr>
</tbody>
</table>
</div>
after I lookup solution for this , finally can come out with this code but it is not working either
div.table-responsive table.returnSpreadIndex tbody > tr > td>div:hover .hover1 {
background-color: yellow;
}
div.table-responsive table.returnSpreadIndex tbody > tr > td>div:hover .hover2 {
background-color: orange;
}
Thank you,

.table-responsive table .hover1:hover {
background-color: yellow;
}
.table-responsive table .hover2:hover {
background-color: orange;
}
<div class="table-responsive">
<table class="table table-responsive table-hover table-condensed returnSpreadIndex">
<thead>
<tr>
<th>Period/Range</th>
<th>n30</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="hover1">
Apple1
</div>
<div class="hover2">
pineApple1
</div>
</td>
<td>testing purpose</td>
</tr>
<tr>
<td>test</td>
<td>
<div>
Apple2
</div>
<div>
pineApple2
</div>
</td>
</tr>
</tbody>
</table>
</div>
This should work perfectly for you,
PS: pay attention to your attribute if you are not using this code inside a react app because ClassName is specific attribute for react

.hover1:hover { background-color: yellow} .hover2:hover {background-color: orange}

As mentioned by #OthManE01,
first warning is for the use of the attribute ClassName, that's specific for react, but not interpreted by HTML instead.
Second mistake is in the css selector. Going up the selection in your code you're gonna make the CSS-rule for an element with class .hover1 (or .hover2)
-direct child of a div:hover
-direct child of td
-direct child of tr
-direct child of tbody of all table with .returnSpreadIndex class, an so on...
Instead you wanna select div.hover1:hover and div.hover2:hover.
So the right CSS-rule could be:
div.table-responsive table.returnSpreadIndex tbody > tr > td>div.hover1:hover {
background-color: yellow;
}
div.table-responsive table.returnSpreadIndex tbody > tr > td>div.hover2:hover {
background-color: orange;
}

HTML table; How to format content within 2nd column to align all - except first element - to right and stretch 1st element to fill remaining width

want to display the following:
where the "..." button in the first row (Web Project) is completely right-aligned to the red line (with a little padding to it)
where the Input field in the 2nd row (Root Namespace) is filling up the space to the right until the red line (with a little padding to it)
where the 2 buttons in the 3rd row (Connection String) are completely right-aligned to the red line (with a liddle padding to it).
I have tried the following but it does not do it correctly - and it only works with a certain width - If I increase or decrease the width, things are getting ugly:
decreasing the width:
My current HTML looks like this:
<div id = "ProjectSelector" width = 100%>
<table width = "100%" style = "padding-bottom: 10px;">
<tr>
<td style="white-space: nowrap; width: 140px;">Web Project (.csproj)</td>
<td style="width: 99%;" ><input id = "webproj" style="width: 97%"/><button id="webproj_browse">...</button></td>
</tr>
<tr>
<td>Root Namespace</td>
<td style="width: 99%;"><input id = "rootnamespace" style="width: 99%"/></td>
</tr>
<tr>
<td>Connection String</td>
<td style="width: 99%;"><select id = "connectionstring" style = "width: 87%"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></td>
</tr>
</table>
</div>
Question: How to format the table and the content of 2nd column to accomplish this properly?

the title of your question describes a typical flex behavior. You may use inside your table a flex container :
.flex {
display: flex;
}
.flex-1 {
flex-grow: 1;
}
<div id="ProjectSelector" width=1 00%>
<table width="100%" style="padding-bottom: 10px;">
<tr>
<td style="white-space: nowrap; width:0;">Web Project (.csproj)</td>
<td>
<div class="flex"><input id="webproj" class="flex-1" /><button id="webproj_browse">...</button></div>
</td>
</tr>
<tr>
<td>Root Namespace</td>
<td>
<div class="flex"><input id="rootnamespace" class="flex-1" /></div>
</td>
</tr>
<tr>
<td>Connection String</td>
<td>
<div class="flex">
<select id="connectionstring" class="flex-1"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></div>
</td>
</tr>
</table>
</div>
It can also be build with grid or flex without a table.
For infos & demo , an example mixing grid and flex, i would probably not use this HTML structure H + P at first :
* {
margin: 0;
}
.flex {
display: flex;
}
.flex-1 {
flex-grow: 1;
}
#ProjectSelector {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0.25em;
;
}
p {
grid-column: 2;
}
<div id="ProjectSelector">
<h4>Web Project (.csproj)</h4>
<!-- title that matches your structure or else can be plain text -->
<p class="flex"><input id="webproj" class="flex-1" /><button id="webproj_browse">...</button></p>
<h4>Root Namespace</h4>
<p class="flex"><input id="rootnamespace" class="flex-1" /></p>
<h4>Connection String</h4>
<p class="flex">
<select id="connectionstring" class="flex-1"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></p>
</div>

My font and text size class doesn't work even though I copy and pasted the code

On my website, I have a class to change font and text size named class='q'. the class will not work even though I copy and pasted this from the home page as It is menu bar for all pages. All other classes work but not this one, Why?
th.q {
font-family: avenir;
font-size: 25px;
}
<BODY>
<TABLE class='a' border='0' width='100%'>
<TR height='20%'>
<TH class='q'><a class="hover">About</a></TH>
<TH class='q'><a>Products</a></TH>
<TH class='q'><a>Pricing</a></TH>
<TH class='q'><a>Contact</a></TH>
</TR>
</TABLE>

(Referring to your answer:)
Unfortunately, giving multiple elements the same id invalidates your HTML. If the #font selector was enough to fix the problem, you should be able to give the <table> an id instead and select its <th> descendants:
#navigation th {
font-size: 25px;
}
<TABLE id='navigation' class='a' border='0' width='100%'>
<TR height='20%'>
<TH><a class="hover">About</a></TH>
<TH><a>Products</a></TH>
<TH><a>Pricing</a></TH>
<TH><a>Contact</a></TH>
</TR>
</TABLE>
Also, the border, width, and height attributes should be in CSS, not HTML:
#navigation th {
font-size: 25px;
}
#navigation {
border: none;
width: 100%;
}
#navigation tr {
height: 20%;
}
<TABLE id='navigation' class='a'>
<TR>
<TH><a class="hover">About</a></TH>
<TH><a>Products</a></TH>
<TH><a>Pricing</a></TH>
<TH><a>Contact</a></TH>
</TR>
</TABLE>
Of course, you shouldn't be using tables for layout, anyway.

Since nothing else works I have used Ids to fix it.
HTML
<BODY>
<TABLE class='a' border='0' width='100%'>
<TR height='20%'>
<TH id='font'><a class="hover">About</a></TH>
<TH id='font'><a>Products</a></TH>
<TH id='font'><a>Pricing</a></TH>
<TH id='font'><a>Contact</a></TH>
</TR>
</TABLE>
CSS
#font {
font-family: avenir;
font-size: 25px;
}

Margin-left ignored in Chrome on page-load

I have run into following issue. I am displaying a table with data on a page, which is nested in main . Its margin-left isset to 5% (margin-right too) and it has defined width. For some reason when I load the page in Chrome, the left margin is ignored. And here it gets interesting. When I open dev console it gets applied. If I reload the page with console open, it gets broken again. When I turn off any css setting in the console (or basicaly touch anything related to content) it gets fixed again. I am using Unsemantic framework for responsive behavior (only desktop part of it) and I had no trouble with it so far, just this. And since it behaves this strangely, I dont think it has anything to do with the code.
You can see it clearly on this short screencap: http://screencast.com/t/mGotS01iC
Just to be sure, I am posting HTML and CSS for the element:
<table class="grid-90 prefix-5 suffix-5">
<tbody>
<tr>
<th> UserName </th>
<th> Email </th>
<th> Guid </th>
<th> IsUsingTempPasswd </th>
<th> LastLogin </th>
<th> PasswordChanged </th>
<th>Actions</th>
</tr>
<tr>
<td> Administrator </td>
<td> admin#physter.com </td>
<td>
<div class="table-long">00000002-0000-0000-0000-000000000069</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
Edit
|
Details
|
Delete
|
Reset Password
</td>
</tr>
<tr>
<td> venca </td>
<td> venca#mail.cz </td>
<td>
<div class="table-long">00000002-0000-0000-0000-00000000006a</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> 23.8.2013 12:23:39 </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
Edit
|
Details
|
Delete
|
Reset Password
</td>
</tr>
<tr>
<td colspan="7">
Create New
</td>
</tr>
</tbody>
</table>
Here is CSS for the element:
grid-90 {
float: left;
width: 90%;
}
.suffix-5 {
margin-right: 5%;
}
.prefix-5 {
margin-left: 5%;
}
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
-moz-box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
table {
border: medium none;
margin-bottom: 2.5em;
margin-top: 1em;
text-align: left;
width: 100%;
}
body {
color: #006666;
font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
}
Anybody has an idea? I would be grateful for solution that would allow me keep the framework as it is and do not overwrite its behavior...

Width of 90% and the fact that you want the table on center are enough. The edges will be calculated automatically. So your code would look like this:
CSS
grid-90 {
width: 90%; }
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
-moz-box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
table {
border: medium none;
margin-bottom: 2.5em;
margin-top: 1em;
text-align: left;
margin: 0 auto;
}
body {
color: #006666;
font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
}
In HTML remove the names of the two divisions: <table class="grid-90"> I hope that helps!

Only thing needed was a little "hack" - adding float:none !important; to <table> elelemnt was enough.
Thanks to Dragos Sandu who put me up to this - removing float:left from grid-90 class was his idea and first step I tried.

Setting fixed height for all rows of the table

I have created a table http://jsfiddle.net/vR5B8/.
table id="resultDetails" class="table-striped" border=1 width="99%" nowrap=0; cellspacing=0; cellpadding=3><tbody>
<th colspan="2"><Big>Result Details</Big></th>
<tr data-depth=0 class="collapse" height=1px >
<td width="4%">P</td>
<td width="80%">Modules
<div class="content">
<p>Abc</p>
</div>
</td>
</tr>
<tr data-depth=0 class="collapse" height=1px >
<td width="4%">P</td>
<td width="80%">Modules 1</td>
</tr>
<tr data-depth=0 class="collapse" height=1px >
<td width="4%">P</td>
<td width="80%">Modules 2</td>
</tr>
</tbody>
Some of the rows contain additional information which is hidden. If the row contains hidden information, then the height of row is increasing compare to the row which does not contain the hidden information. How to set the common height for all rows.
Any thoughts ?

Use display: none instead of visibility hidden demo

tr {
height: 50px;
}
for example :) or
tr {
height: auto;
}
depends of what you need :)

The table row height will increase dynamically in height if more information is added, but to hide an element, use display: none and to give a height to a row, use line-height: /* size */;
.content {
display:none;
}
tr {
min-height: 20px;
line-height: 20px;
}
Here's the jsFiddle