I have a scenario where one table had some tr and other table have less tr's than first one table.Both tables are under td's. In this Scenerio how to increase only last tr height of html table in % mode not in px mode
HTML CODE:
<table border="1" style="width:100%">
<tr>
<td style="width:50%">
<table border="1" style="width:100%">
<tr>
<td>
A
</td>
</tr>
<tr>
<td>
B
</td>
</tr>
<tr>
<td>
C
</td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table border="1" style="width:100%;">
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
jsfiddle Demo
Try like this: Demo This will expand only last row of right side content
CSS:
table {
height: 100%;
width: 100%;
}
td {
}
.table {
display: table;
height:100%;
}
.cell {
vertical-align: top;
display: table-cell;
height:100%;
}
.container {
height: 100%;
-moz-box-sizing: border-box;
}
HTML:
<table border="1" style="width:100%;" class="table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td class="cell">
<div class="container">Increse this row height till parents td height</div>
</td>
</tr>
</table>
EDIT: If you want right column should be equally expanded, you can use like this: Demo
CSS:
table {
height: 100%;
width: 100%;
}
Hope this is what you want!!
use single table and rowspan
<table border="1" style="width:100%">
<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td rowspan="3">3</td></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
</table>
Related
This is probably really easy but I'm stuck trying to remove whitespace from a table cell when reducing the width of a nested image.
Eg I want to remove the whitespace in this example
JSFiddle: https://jsfiddle.net/8qm61hny/
HTML:
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
.q_p2_img {
width:60%;
}
I've tried various css display options but cannot find what I need to do this.
Don't use percentage value because percentage value will get resolved after setting the parent width since we need a reference to resolve it. In your case, you will have 60% of the parent size and 40% of whitespace.
Use pixel value instead:
.q_p2_img {
width: 200px;
}
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use this minimum table css for cross-browser and responsive <table> styling
html
<div class="tbl">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 11</td>
<td>Data 12</td>
</tr>
<tr>
<td>MoreData 21</td>
<td>MoreData 22</td>
</tr>
</tbody>
</table>
</div>
css
.tbl {
width: 100%; /* table width */
box-sizing: border-box;
overflow-x: auto;
}
.tbl * {
margin: 0;
box-sizing: border-box;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-size: 0; /* remove gap */
}
thead, tbody, tr {
width: inherit;
}
th, td {
vertical-align: top;
text-align: left;
white-space: normal;
font-size: 16px;
}
#media (max-width: 767.9px) {
table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}
I have a table where I load dynamic content, and I want that the content inside the cells is the same height as the cells! Precisely I have "a" elements with some text, inside the td cells. I get a problem when the text in a cell is long and goes at newline, and like you can see in the image the other "a" elements in the table row don't fit the full height of the cell.
See the live Demo
Here is the code
HTML
<table class="table" cellspacing="0">
<thead>
<tr>
<th>Data</th>
<th>Titolo</th>
<th>Sede</th>
<th>Città</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/02/2015
</td>
<td><span class="fixed glyphicon glyphicon-flag"></span>asd
</td>
<td>ada
</td>
<td>asdas
</td>
</tr>
<tr>
<td>04/02/2015
</td>
<td><span class="fixed glyphicon glyphicon-flag"></span>ada
</td>
<td>prova
</td>
<td>asda
</td>
</tr>
<tr>
<td>07/09/2017
</td>
<td><a href="eventi.php?id=12">Evento Lignano <br>
sabbiadoro</a>
</td>
<td>Palazzetto dello Sport
</td>
<td>Perugia
</td>
</tr>
<tr>
<td>09/09/2015
</td>
<td>aaa
</td>
<td>aaa
</td>
<td>aaa
</td>
</tr>
<tr>
<td>09/03/2015
</td>
<td>sfsd
</td>
<td>ada
</td>
<td>dadasd
</td>
</tr>
</tbody>
CSS
table{
width:400px;
}
td a{
background:#ff0;
display: block;
padding:20px;
box-sizing:border-box;
height: 100%;
width: 100%;
}
td{
height:100%;
position: relative;
}
table {
width: 400px;
}
td a {
background: #ff0;
display: block;
padding: 20px;
box-sizing: border-box;
height: 100%;
width: 100%;
}
td {
height: 100%;
position: relative;
}
<table class="table" cellspacing="0">
<thead>
<tr>
<th>Data</th>
<th>Titolo</th>
<th>Sede</th>
<th>Città</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/02/2015
</td>
<td><span class="fixed glyphicon glyphicon-flag"></span>asd
</td>
<td>ada
</td>
<td>asdas
</td>
</tr>
<tr>
<td>04/02/2015
</td>
<td><span class="fixed glyphicon glyphicon-flag"></span>ada
</td>
<td>prova
</td>
<td>asda
</td>
</tr>
<tr>
<td>07/09/2017
</td>
<td><a href="eventi.php?id=12">Evento Lignano <br>
sabbiadoro</a>
</td>
<td>Palazzetto dello Sport
</td>
<td>Perugia
</td>
</tr>
<tr>
<td>09/09/2015
</td>
<td>aaa
</td>
<td>aaa
</td>
<td>aaa
</td>
</tr>
<tr>
<td>09/03/2015
</td>
<td>sfsd
</td>
<td>ada
</td>
<td>dadasd
</td>
</tr>
</tbody>
</table>
Here is a little hack I've used in the past.
You can essentially add a pseudo element to the a element and absolutely position it relative to the closest td element. Since the pseudo elements are essentially children elements of the a element, when you click the pseudo element, you are inadvertently clicking the a element.
Updated Example
td a:after, td a:before {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
td a:after {
background: #ff0;
z-index: -1;
}
You must define an height of your TD, otherwise the browser doesn't know the 100% of what is to be considered:
td {
height:100px;
position: relative;
}
https://jsfiddle.net/wg6paumw/4/
I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:
<table style="border:solid;width: 100%">
<tr>
<td align="center">
<table style="border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:
<td style="text-align:center">
And this:
<td style="margin: 0 auto">
And the tables keeps in the left-side of the cell. Any suggestions?
You had the right idea with margin:auto 0; just take off the 0.
Working example: http://jsfiddle.net/cxnR8/
<table style="border:solid;width: 100%">
<tr>
<td>
<table style="margin:auto;border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But, more importantly, do you really need to use tables and in-line styling?
Center the table using the deprecated align="" attribute.
<table>
<tr>
<td>
<table align="center">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
Your seccond suggestion is correct. See this working example.
HTML:
<table class="outer">
<tr>
<td>
<table class="inner">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
.outer
{
width: 100%;
border: solid 1px red;
}
.inner
{
width: 25%;
margin: auto;
border: solid 1px blue;
}
I have some nested tables. There is the main, outer table, it has to nested tables for the left and right columns, and in each column some tables are stacked on top of each other. What I can't seem to figure out is how to get the tables in the column to all span the same width (mostly in the right column). Here is the HTML, scaled down for readability:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2" style="margin-top:20px; margin-left:86px">
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<tr>
<td>
<table class="cell" id="t3">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t4">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t5">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t6">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t7">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t8">
</table>
</td>
</tr>
<tr>
<td>
<table class="messages" id="t9">
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
.outer
{
margin: auto;
}
.column
{
border: none;
margin-left: auto;
margin-right: auto;
}
table.cell
{
border-collapse: collapse;
}
#rightColumn table
{
padding: 10px;
width: 100%;
}
Any advice is appreciated.
If you really want to nail down table column widths, use the table-layout: fixed CSS property on the table and specify widths for all of the cells in the first row (or use col elements if you're starting with no first row).
So the CSS I had was valid. Firefox had actually cached an older CSS for this page. The widths went to 100% as soon as I cleared the cache.
I have some nested tables where there is one outer, container table, two column tables nested in the outer table, and then various tables stacked on each other in the columns. Here is the relevant HTML:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
<tr><td><asp:Literal runat="server" ID="t1r2c0" /></td><td><asp:Literal runat="server" ID="t1r2c1" /></td><td class="image"><span id="s1" runat="server"><asp:PlaceHolder ID="p1" runat="server"></asp:PlaceHolder></span></td><td><asp:Literal runat="server" ID="t1r2c3" /></td><td class="gray"><asp:Literal runat="server" ID="t1r2c4" /></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<tr>
<td>
<table class="cell" id="t3">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t4">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t5">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t6">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t7">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t8">
</table>
</td>
</tr>
<tr>
<td>
<table class="messages" id="t9">
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
.cell
{
border: none;
}
.cell td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
padding: 2px;
}
.image
{
padding: 0;
margin: 0;
width: 65px;
}
My problem is that the image tds have a padding of 2px. My understanding was that the CSS for .image -- being more specific -- should override the CSS for ".cell td".
Any advice is appreciated.
Specificity isn't determined by how "deep" the elements are, but just by how explicit the selectors are.
The specificity score is based on
the number of ID selectors
otherwise, the number of class/attribute selectors
otherwise, the number of element selectors
.cell td contains a class selector and an element selector
.image contains a class selector and no element selectors
So, the first rule is more specific.