I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
<div class="mydiv">mydiv</div>
But I want to place the div next to tables, so that it can extend downwards.
Here is the working fiddle http://jsfiddle.net/ZHVuf/1/
You should add a container around you table like this :
Html
<div id="container">
<!-- Your table -->
</div>
And make him float left, like your div #myDiv
Css
#container {
float:left;
}
see updated fiddle.
On this second updated fiddle, I added a wrapper with a clearfix !
insertusernamehere commented that you could use overflow:hidden instead of the clearfix, see here for a new working way to do this with less code.
Apply float:left; to all the table and add clear:both; to second and third table.
now you already has float:left; for div just add position:relative;top:0; and see.
OR
create two divs and add tables in one with left floating and you already have second div.
<div class="tableContainerDiv" style="float:left;">
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
</div>
<div class="yourDiv" style="float:left;"></div>
html
<div class="cl">
<div style="float: left">
your tables
</div>
<div class="mydiv" style="float: left">mydiv</div>
</div>
css
.cl:after{ content: " "; display: block; height: 0px; clear: both; visibility: hidden;}
.cl {display: inline-block;}
/* Hides from IE-mac \\*/
* html .cl {height: 1%;}
.cl {display: block;}
/* End hide from IE-mac */
move tables inside another div , float to left;
HTML
<div class="table-wrap">
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</div>
<div class="mydiv">mydiv</div>
CSS
.class1{
width: 100px;
height: 100px;
background: orange;
}
.class2{
width: 100px;
height: 100px;
background: green;
}
.class3{
width: 100px;
height: 100px;
background: gray;
}
.mydiv{
width: 200px;
background: blue;
float: left
}
.table-wrap{float:left;}
<table>
<tr><td>
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>enter code here
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</td>
<td>
<div class="mydiv">mydiv</div>
</td>
</tr>
</table>
Related
I have the following materialize table:
<div class="row">
<div class="col s12 m12 l12">
<div id="table" class="card card card-default scrollspy">
<div class="card-content material-table ">
<h4 class="card-title">Users Live Results</h4>
<div class="row">
<div class="col s12"></div>
<div class="col s12">
<table class="responsive-table striped">
<thead>
<tr>
<th style="text-align:left;">User</th>
<th style="text-align:right;">RM Deposits</th>
<th style="text-align:right;">RM+RB GGR</th>
<th style="text-align:right;">RM Win</th>
<th style="text-align:right;">RB Win</th>
<th style="text-align:right;">PB Win</th>
<th style="text-align:right;">RM&RB Balance</th>
<th style="text-align:right;">Bo Deposits</th>
<th style="text-align:right;">Withdrawals</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;">Moha</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">0</td>
</tr>
<tr>
<td style="text-align:left;">handx</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">99</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">99</td>
<td style="text-align:right;">151</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">250</td>
<td style="text-align:right;">0</td>
</tr>
<tr>
<td style="text-align:left;">Arff</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">19</td>
<td style="text-align:right;">19</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">106</td>
<td style="text-align:right;">13</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">260</td>
<td style="text-align:right;">161</td>
<td style="text-align:right;">99</td>
<td style="text-align:right;">257</td>
<td style="text-align:right;"></td>
<td style="text-align:right;">250</td>
<td style="text-align:right;">0</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I used a CSS fixed header and scroll for tables with a lot of data with the following css:
table {
font-size: 12px;
}
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
table {
width:100%;
}
It is working but the footer of the table is outside of the scroll section (offset)
as per this screenshot:
Finally, on small devices, the scroll does not work at all, so I should exclude the CSS for smaller devices and I did not find any solution to do so.
Thanks for your help !
You have too much CSS in the table which offset's the natural CSS that is there. You can add padding to the td tag to set up how you want it to be spaced.
You can play with the different heights you need ( the table or content is set to whatever height and same for the parent container to make sure it scrolls ).
table {
font-size: 12px;
width: 70%;
height: 500px;
}
tbody {
overflow:auto;
}
thead, tbody tr {
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
.SetContainer{
height: 200px;
overflow: auto;
}
https://jsfiddle.net/86rnu03L/1/
I have done three columns with a mid column with an absolute icon on the side but the problem happens when you show it in the mobile or the screen is different that mine. If you resize screen the icon moves to the left.
The problem is that I used a position absolute for the icon, Is there no other way to do it?
I want to obtain this:
Codepen Code
table{
text-align:center;
margin-top:20px;
}
td{
padding: 20px;
}
#midCol{
background:lightblue;
width:90px;
}
#iconArrow{
color:red;
font-size:100px;
position: absolute;
top:140px;
right:985px;
}
.col1{
background:ghostwhite;
width:400px;
}
.col2{
background:ghostwhite;
width:400px;
}
<div class="container">
<div class="row">
<table border=0>
<tr>
<td class="col1">WORD</td>
<td id="midCol" rowspan="6">
<h2 >C</br>R</br>E</br>A</br>T<span id="iconArrow" class="glyphicon glyphicon-triangle-right"></span></br>I</br>N</br>G</h2>
</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
</table>
</div>
</div>
Instead of setting the left or right attribute on the absolute-positioned element, use auto to centre it, and then left/right margin to nudge it along.
E.g. these settings look about right:
#iconArrow {
right: auto;
margin-left: 6px;
/* other attributes */
}
I'm trying to get an HTML markup that represents the following table layout:
I tried this but it's not working:
<table border="1">
<tr>
<td style="height: 800px">
1
</td>
<td style="width: 300px; height: 400px">
2
</td>
</tr>
<tr>
<td style="height: 200px">
<p>3</p>
</td>
<td style="height: 600px">
4
</td>
</tr>
</table>
This looks pretty close to the image you provided. It's a little tricky because it actually requires 3 rows, but once you get your head wrapped around rowspan, then it makes sense.
<table border="1">
<tr style="height: 200px;">
<td style="width: 400px;" rowspan="2">
1
</td>
<td style="width: 200px;">
2
</td>
</tr>
<tr style="height: 200px;">
<td rowspan="2">
4
</td>
</tr>
<tr style="height: 50px;">
<td>
<p>3</p>
</td>
</tr>
</table>
You just need to add another row and add rowspans:
<table border="1">
<tr>
<td style="width: 300px; height: 400px" rowspan="2">
1
</td>
<td style="width: 300px; height: 200px">
2
</td>
</tr>
<tr>
<td style="height: 200px" rowspan="2">
4
</td>
</tr>
<tr>
<td style="height: 100px">
3
</td>
</tr>
</table>
See jsfiddle: http://jsfiddle.net/mt009cha/
EDIT
Do you have to use tables? This seems more like a layout and divs might be more appropriate.
Html:
<div class="container">
<div class="left">
<div style="height: 498px">1</div>
<div style="height: 98px">3</div>
</div>
<div class="right">
<div style="height: 298px">2</div>
<div style="height: 298px">4</div>
</div>
</div>
CSS:
div {
border: 1px solid black;
}
.container {
width: 600px;
height: 600px;
}
.left {
width: 398px;
height: 100%;
float: left;
}
.right {
width: 198px;
height: 100%;
float: right;
}
See jsfiddle: http://jsfiddle.net/zynt5j7e/
FIDDL
If you must use tables:
<table class="tbl">
<tr>
<td>
<table>
<tr>
<td style="height: 800px">
<p>top left</p>
</td>
</tr>
<tr>
<td style="height: 200px">
<p>bottom left</p>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td style="height: 400px">
<p>top left</p>
</td>
</tr>
<tr>
<td style="height: 600px">
<p>bottom left</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Some CSS:
.tbl, .tbl table { border-collapse: collapse; width:100%; }
.tbl td, .tbl table td{ border:1px solid black; padding:0; margin: 0; }
Im still pretty new to AngularJS. Im trying to change the color of the table element so that its yellow if the user voted on this choice.
<div ng-show="poll.userVoted">
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table ng-if="choice.text == poll.userChoice.text" style="background-color: yellow; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
<table ng-if="choice.text != poll.userChoice.text" style="background-color: lightblue; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
This is done by using ng-class.
Use ng-class on your td like this:
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text}">...</td>
that will put the css class yellowstyle on the item when your condition is true.
And in your example:
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table style="width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text}">{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
with a style.css file that has:
.yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}
I'm trying to align some text on table cells with a PNG Transparent background, I uses the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() to fix this in IE6. But the text does not align to the middle with the style filter:
CSS:
.fh {
font-family:SimSun;
font-size:12px;
overflow:hidden;
padding:0 2px 2px;
text-align:left;
vertical-align:middle;
}
HTML:
<table width="200" border="1" cellpadding="2" class="x-table">
<tr>
<th scope="col"> </th>
</tr>
<tr style="height: 77px;">
<td class="fh" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./shadow-trans.png')"> ABCDEFG</td>
</tr>
</table>
Screenshot:
"vertical_align_ie6" http://filer.blogbus.com/4216262/resource_4216262_1279530625v.png
Try shifting the height to the TD or the TABLE.
I find that this problem can be fixed by insert a div with a table in it to the origin td:
HTML:
<table cellspacing="0" cellpadding="0" class="x-table" style="position: absolute; width: 289px; left: 0px;">
<colgroup>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
</colgroup>
<tbody>
<tr style="height: 77px;">
<td class="brw1 brss bbw1 bbss blw1 blss btw1 btss" style="border-color: rgb(153, 204, 255); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./shadow-trans.png', sizingMethod=crop);background-repeat: no-repeat;" id="A1-0" colspan="4">
<div class="fx" style="height: 76px;">
<table>
<tbody>
<tr>
<td class="fh bw" style="height: 76px; width: 288px;">ABCDEFG</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>