I'm trying to make 2 separate tables to echo results of drinkers and their drinks from a bar.
The tables have alternating backgrounds using nth-child(odd), nth-child(even) which is working fine.. its just getting them to align through different browsers and getting rounded corners.
I've tried using nth-last-child(1)..etc but still no tidy solution.
Here's where I'm at so far..
http://giblets-grave.co.uk/index3.php
and this is what its ment to look like:
http://giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg
Take a look at my current css at /css/main2.css
I've not seen your code, but I mocked up a similar scenario.
HTML
<div id="main">
<div id="first">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
<div id="second">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
</div>
As you can see, the height of the second table is "dynamic", and it could be longer than the first table, doesnt matter.
The CSS
#main {
width:500px;
overflow:hidden;
}
#first, #second {
padding-bottom: 1000px;
margin-bottom: -1000px;
float: left;
}
#first {
float:left;
width:100px;
overflow:auto;
}
#second {
width:400px;
float:left;
}
Thus far, what you have is the #first parent to follow the height of the #second. Reference
Fiddle
So what now? The #first follows the height of the #second, but the #first_child does not follow the height of #first. However, HTML tables does not follow parents div's heights. Reference
Answer: Javascripts.
You first want to detect the height of the #second, and then auto adjust the height of the #first_child to follow the height of the #second.
var second_height = $("#second").height();
var table_height = second_height;
$("#first_child").height(table_height);
Solution
Hope this is what you're looking for.
Related
I have three tables, First Table margin-top is 50px and second table have variation rows depends on the text but the Third table I want to fix margin-top is :150px standard.
but third table not able to fix it on margin-top:150px because the second table have variation of the rows.
How to fixed the third table on margin-top:150px even-though the second table have variation rows?
for example :
Table 1
Name : Balakrishnan
Table 2 <br>
S.No particulars Amount <br>
1 Desk 200 <br>
Table 3
Total : 200
I want to fix constant position of the table 3 even though table2 rows increased
! when rows increased table 2 the third table should not move to down
I have tried the following code
.table1
{
margin-top:10px;
}
.table2
{
margin-top:15px;
}
.table3
{
margin-top:30px;
}
the above code defined in
the table class
please click the above link to view my picture
If I understand what you are asking the best solution is the following:
Wrap all the tables in a div
Give the middle div a fixed height and overflow: auto
HTML:
<div>
<table>
<tr>
<th>Name</th>
<td>Balakrishnan</td>
<td>Age</td>
<td>25</td>
</tr>
</table>
</div>
<div class="fixed">
<table>
<tr>
<th>S.No</th>
<th>Particulars</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>Item1</td>
<td>1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>Item2</td>
<td>1</td>
<td>50</td>
</tr>
<tr>
<td>3</td>
<td>Item3</td>
<td>1</td>
<td>50</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<th>Total:</th>
<td>250</td>
</tr>
</table>
</div>
CSS:
.fixed {
height: 150px;
overflow-y:auto;
margin: 20px 0 ;
}
Example:
http://jsfiddle.net/podjpv8j/
More Rows Example:
http://jsfiddle.net/podjpv8j/1/
I'm not sure what you want to do with the box in the middle. Meaning do you want it to adjust with the page, or scroll when it gets too much information in it. What it sounds like is you want a footer style box that stays in the same position though out the page. Check out this how-to site and follow the instructions to the footer.
This should help you understand how the 3rd box will stay in a "fixed position".
http://learnlayout.com/position-example.html
Is there a 'correct' way of creating fixed width content in Semantic-UI?
I have a canvas element on the page which must remain a specific size, however when using their grid system it seems to always scale no matter what setup I try.
If I understand you correctly, I think that's not possible with Semantic UI grids. But using min-width and min-height might help you.
CSS
.fixed-width {
width: 300px;
height:300px;
min-width: 300px;
min-height:200px;
border:1px solid #000000;
}
Have a look at this jsfiddle snippet
Now Semantic UI supports a 16 column grid for table similar to ui grid. You can set length this way
<table class="ui table">
<thead>
<tr>
<th class="ten wide">Name</th>
<th class="six wide">Status</th>
</tr></thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
</tr>
</tbody>
</table>
I'm going off my rocker with IE/CSS problems! I've tried everything (I think) is imaginable to center the text of a table cell. I started with the old, archaic method:
<tr>
<th width="100" align="center" class="centerme">Some text here.</th>
</tr>
Then, I tried CSS:
.centerme {text-align:center;margin:0 auto;}
Then I tried putting the style inline (keeping ALL the other methods already mentioned):
<tr>
<th width="100" align="center" class="centerme" style="text-align:center;">Some text here.</th>
</tr>
What could I possibly be missing? I tried center aligning the <tr> element, which shouldn't make a difference, but then IE is a nightmare to get along with! Note this is only a problem in IE. It is fine in every other browser (and this is IE 8)
Removing the width="100" resolved the issue.
Try this:
td
{
height: 50px; (or whatever value you want)
width:50px;
}
#cssTable td
{
text-align:center;
vertical-align:middle;
}
Try this code. I was able to get it to work.
The margin centers the table on the screen. So delete it if you do not want it to be centered.
Change the width to whatever you desire. Right now it is 100% for the whole width of the screen.
HTML:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
CSS:
table, th, td
{
border: none;
margin:0px auto;
text-align:center;
}
table{
width:50%;
}
Our build software has a web interface that reports build status using a table. When a build is pending, it outputs the last log message in an inner table. These log messages can be very, very long.
This is a distilled version of the HTML emitted:
<html>
<head>
</head>
<body>
<table id="StatusGrid" class="SortableGrid">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr class="buildstatus">
<td colspan="11">
<table>
<tr>
<td>hello</td>
<td>...........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
If you display this HTML in your browser, you have to vertically scroll to see the entire contents of the table. I don't want this. I never want the table to extend outside the vertical width of the browser window. I don't mind truncating/clipping the extra-long text in the inner table.
I tried word-break: break-all, but that only works in Chrome. I have to support IE 9 and the latest versions of Chrome and Firefox.
The final wrinkle: I have to use CSS to fix this. I only have access to the application's stylesheet, and not the HTML.
What do you think? Possible?
Try putting a fixed height on the td and set its overflow or overflow-y to hidden;
tr.buildstatus td{
height: 500px;
width: 600px;
overflow:hidden; /* or overflow-y:hidden; */
}
This should work for you. You may have to adjust height/width to your taste.
tr.buildstatus tr td + td {
height:100px;
width:200px;
overflow:hidden;
}
table {
table-layout:fixed;
width:600px;
height:200px;
}
Live example: http://jsfiddle.net/R8nmk/
Try overflow: hidden.
The overflow is clipped, and the rest of the content will be invisible.
More about overflow here.
I have a table of users where each row contains their names, e-mail address, and such. For some users this row is one text line high, for some others two, etc. But I would like that each row of the table be one text line high, truncating the rest.
I saw these two questions:
A column of a table needs to stay in one line (HTML/CSS/Javascript)
CSS: limit element to 1 line
In fact my question is exactly similar to the first one, but since the link is dead I can't study it. Both answers say to use white-space: nowrap. However this doesn't work, maybe I'm missing something.
Since I can't show you the code, I reproduced the problem:
<style type="text/css">
td {
white-space: nowrap;
overflow: hidden;
width: 125px;
height: 25px;
}
</style>
<div style="width:500px">
<table>
<tr>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
</tr>
</table>
</div>
Without white-space the table is 500px wide, and the text takes more than one line.
But white-space: nowrap makes the browser simply ignore the width directive and increase the width of the table until all data fits in one line.
What am I doing wrong?
Add the following code to your stylesheet:
table {
white-space: nowrap;
}
overflow will only work if it knows where to start considering it overflown. You need to set the width and height attribute of the <td>
TAKE 2
Try adding table-layout: fixed; width:500px; to the table's style.
UPDATE 3
confirmed this worked: http://jsfiddle.net/e3Eqn/
Add the following to your stylesheet:
table{
width: 500px; table-layout:fixed;
}
You need to add the table width to ensure that the next property will fit the elements to the specified size. The table-layout property here forces the browser to use a fixed layout within the 500 pixels it's given.
<table border="1" style="width:200px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td nowrap="nowrap">
Single line cell just do it</td>
<td>
multiple lines here just do it</div></td>
</tr>
</table>
Simple And Useful.
use above code for
<table border="1" style="width:200px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td nowrap="nowrap">Single line cell just do it</td>
<td>multiple lines here just do it</td>
</tr>
</table>