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
Related
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>
I am creating a table in html and it needs to be scrollable. So I changed the display to block and made overflow-y scroll. When I do this it makes the columns header not spaced out so there is a lot of excess space. I know the display block setting is what causes this, but I need to make it scrollable. how do I set this in css and html?
table {
margin-bottom: 40px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
height: 250px !important;
overflow-y: scroll;
display: block;
}
<table>
<thead>
<tr class="rowTable header">
<th class="cell">Date Submitted</th>
<th class="cell">Bounty Name</th>
<th class="cell">Company</th>
<th class="cell">Paid</th>
<th class="cell">Details</th>
<th class="cell">Response</th>
</tr>
</thead>
<tbody>
{% for report in recentReports %}
<tr class="rowTable">
<td class="cell">{{report.date}}</td>
<td class="cell"><a href="/_hunter/bounty/{{report.bountyID}}">{{report.name}}</td>
<td class="cell">{{report.company}}</td>
<td class="cell">{{report.amountPaid}}</td>
<td class="cell">
<button type="button" class="detailsButton" data-toggle="modal"
data-target="#detailsModal" data-whatever="#getbootstrap"
data-ID={{report.reportID}}>
View
</button>
</td>
<td class="cell">
<button type="button" class="messageButton" data-toggle="modal"
data-target="#messageModal" data-whatever="#getbootstrap"
data-ID={{report.reportID}}>
View
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
Here is a photo of what happens. I think its clear to see that what i want is the columns take take up the entire table evenly. The image is of just the table, not the entire webpage.
You need to do what #Johannes suggests:
<div id="wrapper">
<!-- put your table here-->
</div>
Change your Css to:
#wrapper {
margin-bottom: 40px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
height: 250px !important;
overflow-y: scroll;
display: block;
}
table{
width:100%
}
And you are done. If you find this answer useful, please up vote #Johannes answer. And if you feel Happy up vote mine to.
See example:
https://jsfiddle.net/ex239ck6/
put the table in a DIV that has the settings your table has now (i.e. height and overflow), and let the table be a table...
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>
I have a simple table:
<table class="caspGrid">
<thead></thead>
<tbody>
<tr class="caspRow">
<td class="caspColEntity">
<input type="checkbox"/>
<span>Favorites</span>
<p>(<span>2</span>)</p>
</td>
<td class="caspColSummary">
<p>FY13 SPM Mobility Strategy</p>
<p>FY13 SPM Mobility Strategy</p>
<p>FY13 SPM Mobility Strategy</p>
</td>
<td class="caspColTeam">
<p>Tim Smith</p>
<p>Tim Smith</p>
<p>Tim Smith</p>
</td>
</tr>
</tbody>
</table>
I'd like the table to span the entire page height but I want each <tr> to wrap around the content and the last <tr> to span the rest of the way, how can I do that?
HERE IS A FIDDLE
You can use last-of-type CSS3 pseudo-class:
tr:last-of-type {
height: 100%;
}
this will target only the last tr.
Demo: http://jsfiddle.net/5L7fb/
If you have multiple tables in one page, then you should use descendant or child selectors:
/* Descendant */
table tr:last-of-type {
height: 100%;
}
/* Child */
table > tr:last-of-type {
height: 100%;
}
How can entire table cell be hyperlinked in html without javascript or jquery?
I tried to put href in td tag itself but its not working at least in chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
Try this way:
<td> </td>
Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.
<td onclick="location.href='yourpage.html'">Link</td>
Here is my solution:
<td>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)
Problems:
(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
My Suggestion to complete answer of (User: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.
<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
<table style="margin-left: auto; margin-right: auto;" align="center">
<tr>
<td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
</tr>
</table>
</a>
If you want use this way in php Do the following
<?php
echo ("
<script type = 'text/javascript'>
function href() {
location.href='http://localhost/dept';
}
</script>
<tr onclick='href()'>
<td>$id</td>
<td>$deptValue</td>
<td> $month </td>
<td>100%</td>
</tr>
");
?>