I want to create a div layout which is similiar to the following table result:
<html>
<head>
<title>Basic</title>
<style>
table { border: 1px solid;}
</style>
</head>
<body>
<table style="border: 1px solid;">
<tr>
<td> Asia</td>
<td>
<table>
<tr>
<td>South Asia</td>
</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>Singapore</td></tr>
<tr><td>India</td></tr>
</table></td>
</tr>
<tr>
<td>Monarchy</td>
<td><table>
<tr><td>Bhutan</td></tr>
<tr><td>Nepal</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>East Asia</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>China</td></tr>
<tr><td>South Corea</td></tr>
</table></td>
</tr>
<tr>
<td>Constitutional Monarchy</td>
<td><table>
<tr><td>something</td></tr>
<tr><td>Japan</td></tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
I managed to replicate this with some effort. The problem is that I want the names of the countries to be in a column or if you will - the containers for the government types to be the same width so other containers will align.
If I don't do it in nested containers (in the example - nested tables) the rows will get displaced. Currently rows are shown exactly how I want them - the text is in the vertical middle of the what they refer to.
Only thing that comes up to my mind is to set the text in the same columns as class=column1, class=column2, etc. and then somehow define the width for the column classes. Problem is the data is defined dynamically and I can't say how much pixels or % of the page I can give to a column, I just need it to stretch with the text.
This is my first time I ask about help here so if I am doing it wrong, tell me how do improve my inquiry.
EDIT: I just read it a second time and I noticed my title doesn't match my question.
My second idea to work around this was to have more than one parent to a single div without the parents having a relation between them, is this even possible?
If you're looking for a decent grid framework for your CSS, I highly recommend blueprint. As for not knowing the pixel or % for the column, that will always be a problem. Are you able to 'play it safe' and just give them a large enough box to handle all text possibilities?
Related
I'm trying to style a ng-table layout, which contains a table in each row. The way this expanding functionality is implemented in angular, looks like this:
<tr ng-if="org.expanded" ng-repeat-end>
<td></td>
<td></td>
</tr>
The issue is more related to CSS.
The problem is that, when clicking on the plus icon next to the ServiceType column the 4 expanded columns aren't aligned with the parent tablecolumn headers i.e. Service Type, Location , Contact details and Last Updated.
How can I set it, that the values look nicely aligned(left)?
Also, I can't align the Last Updated column to the left.
Here is a plunkr sample of the problem:
http://embed.plnkr.co/UlMg7J/preview
http://plnkr.co/edit/UlMg7J?p=preview
For the last column not aligned issue I have replaced the table for phone,website..etc with divs and it started to align to the position you desired. What it was doing was it was creating extra headers (th) tags which is not desired.
Your Code:
<td data-title="'Contact Details'">
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
Changed Code:
<td data-title="'Contact Details'">
<div>Phone:</div>
<div>Fax:</div>
<div>Email:</div>
<div>Website:</div>
</td>
I'm trying to customize my bootstrap table. If the table height is larger than a certain height I want the <tbody> to scroll without scrolling the rest of the table. I have tried pretty much everything I can think of but the table wont even change sizes.
Does anyone know what classes I need to modify to fix this? Here's the elements I use in my table:
<div class="table-responsive">
<table class="table table-condensed">
<colgroup>
<col class="col-xs-1"/>
<col class="col-xs-1"/>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
And here's a jsFiddle.
I ran into a similar problem with Bootstrap 2.3.2. I had to modify my table some, but a pretty good website I found with a complete css solution is here:
http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html
I basically took the scrollableArea and scrollableContainer css parts on this site, changed a couple class names to match with what I already had, and used this instead of bootstrap. Maybe this can help, maybe not, but definitely a good alternative.
I am new to modifying column groups in tables and trying to learn how label the css to make the TH in the featured column group a specific background color, as well as the TD's inside that column group. My only problem is, I don't know how to setup the CSS to reflect ONLY those sections.
I have made an example table located at: http://jsbin.com/ocezon/1/edit
If I didn't phrase this correctly, please let me know and I will try to explain further. I have labeled the TH and the TD's I'd like to be able to modify using the #table-5 #featured attribute assigned by column group.
I've tried code like #table-5 #featured TH { background: #000; } but that didn't work.
EDIT: I found out that this probably isn't possible (and after trying numerous methods, I can't make it work either)...so I decided to give the answer to One Trick Pony for suggesting a method that does work; however, I slightly modified this method to make it easy to modify in the future: http://jsbin.com/icasom/1/edit
Without using colgroups, you can style the 3rd child of each row:
#table-5 th:nth-child(3){
background: blue;
}
#table-5 tr td:nth-child(3){
background: #C0000E;
}
http://jsbin.com/ocezon/3
I modified this to make it easier to work with multiple tables and make modifying in the future easier: http://jsbin.com/icasom/1/edit
your table has a strange HTML structure, colgroup and th not even wrap in a tr :
<table id="table-5">
<colgroup>
<col class="row" />
<col class="basic"/>
<col class="premium" id="featured"/>
<col class="enterprise"/>
</colgroup>
<thead>
<tr>
<th>row</th>
<th>basic</th>
<th>premium (modify this TH)</th>
<th>enterprise</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah (modfy this TD)</td>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah (modfy this TD)</td>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah (modfy this TD)</td>
<td>blah</td>
</tr>
</table>
you could maybe add somme rgba color to darken your background-colors:
http://jsbin.com/ocezon/9/ http://jsbin.com/ocezon/9/edit
I have a pop up which opens as all label type or editable type based on the condition.
When I open the pop up as editable, the table is set to center and values are properly
aligned. When I open the same in non editable mode, the values are more moved to the left.
I have uploaded both to JSFiddle for analysis. Please help
Pop up with editable condition
http://jsfiddle.net/gr2022s/C9BZJ/
Pop up with non editable condition
http://jsfiddle.net/gr2022s/C9BZJ/1/
I had done a workaround by adding <blockquote> tag to one of the label but the problem seems to be
the label is moved towards right from the others.
The reason is quite simple :
You never define any width for any <td>. So your <table> will scale each column according to the largest td content. And since your <input type="text /> is way larger than the simple text Ad Hoc, the editable table seems more centered...
Try this to test it :
<table border="1" width="300px">
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>
<table border="1" width="300px">
<tr>
<td>a</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>
<table border="1" width="300px">
<tr>
<td>aaaaaaa</td>
<td>aaa</td>
</tr>
</table>
Or see your updated jsFiddle.
I am developing a card board which is 4x3. So I have tryed to do markup with XTHML Transitional. I have used containers mixed with tables.
The example for first row:
<table>
<tr>
<div class="slot_01"></div>
<div class="slot_02"></div>
<div class="slot_03"></div>
<div class="slot_04"></div>
</tr>
<tr>
...
</tr>
</table>
Is this correctly done? Or its better to use only div/span blocks instead everywhere and make styling through css?
If you use a table, use table, tr, td, not div.
I think most people nowadays try to avoid tables for anything but "really tabular data" and prefer the "pure CSS" solution.
It depends a bit on your overall markup (e.g. what you want to display in the cells). In your case, I guess I would go for a tableless solution.
No, You need td's in there, like this:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
If you really need to, put your divs inside the TDs.
If your data is tabular in nature there's nothing wrong with using tables. Everyone else is correct - you need to use table cells instead of the divs in your sample code.
Ideally use div/span blocks if you can, but the above code is ok, you just need to wrap each div in a td element:
<table>
<tr>
<td><div class="slot_01"></div></td>
<td><div class="slot_02"></div></td>
<td><div class="slot_03"></div></td>
<td><div class="slot_04"></div></td>
</tr>
<tr>
...
</tr>
</table>
For the lay out of the entIre page I would do it tableless. Remember: XHTML is for structure, CSS for displaying the structure.