I have a series of tables that are stack on top of one another. They could be a single table, but for functional reasons, they are split up. They look something like this:
Now, the problem is that they aren't lining up as I would expect them to. The code that governs them looks like so (It is quite lengthy):
http://pastebin.com/eWhEPzF5
The structure is 3 tables deep, and you can see it poke outside of the most inner table when it splits tables. Global styles are pretty simple:
body *
{
font-family:'Consolas';
font-size:12pt;
padding:0px;
}
table
{
border: 0px;
border-style:solid;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
}
td
{
padding:0px;
border:0px;
height:25px;
border-style:solid;
}
--
Now, I originally thought the input boxes is what was screwing up the alignment, but after removing them completely, nothing changed. In fact, adding rows one by one, it only 'breaks' when I add the first row of the first table ("Oh my look at all this data").
I doubled checked all the styling and everything and it all is correct.
Why aren't these cells lining up?
use class, <col> tag and colspan to set equals width in each tables.
add table-layout:fixed; to avoid width to be resized by content.
Now, if you make a codepen from your pastbin it would be confortable to re-use your code and see what you are up to , to devellop further.
regards
Try using this on all the tables:
table-layout:fixed;
Table layout property in w3schools
Regards,
Nikola
There are various places you have the typo
cellWdith310
Assuming you've left out some CSS then that could be the issue
UPDATE:
Here's a JS fiddle. There were just various problems with your HTML such as not having enough TDs in the last table etc. Diff the source see what's different
http://jsfiddle.net/AhLAD/7/
Related
I created this code that displays the paragraphs in second line ... is there a better way to do this?
JSFiddle
HTML CODE:
<p id="first">Primul paragraf</p>
<p id="second">Al dolea paragraf</p>
Code css:
#first
{
width:130px;
background:red;
display:inline;
float:left;
}
#second
{
width:150px;
background:blue;
float:right;
display:inline;
}
Thanks in advance!
If you're looking for two distinct pieces of content to live next to each other, check out a simple grid layout.
If you're trying to mush two distinct pieces of content into one line, then you're using non-semantic HTML, and you should switch to using a different heirarchy of tags to accomplish your content-smushing.
I believe I understand you correctly that you're looking for - essentially - a two column layout. I strongly recommend the css-tricks "Don't Overthink It Grids" layout, and I'm using a slightly (slightly) more complicated grid layout in production sites.
Have a table set up, with a table nested in most of the cells, basically a pyramid matrix type structure. Issue i'm having is the cell borders don't line up and in some cases double up, so i'm a little confused as how to fix it, having already used border specific values, ie, border-bottom and border-right, etc.
Codehttp://jsfiddle.net/WgRs6/5/
PS: I'm new to this so not sure how to post the CSS and HTML like in other user posts, where they're boxed in and you can scroll through, so just attached the
The problem was that you had a padding set..
So, remove the padding for the <td>
Kindly check this fiddle
I,ve added
td{
padding:0;
}
to your css
UPDATE
See the fiddle
I've found out the problem in your code..You used several tables inside a <td> which created such a problem.In my fiddle i've done the whole thing with just one table using rowspan and colspan.Check it..
I'm sorry that i accidentally mis placed your table values while copy pasting and because it took a lot of time i was not able to complete the html.So kindly follow the same procedure inorder to generate the full table..
Just set the td padding to 0px:
td{
padding: 0 !important;
}
http://jsfiddle.net/WgRs6/7/
can you please let me know if there is any chance to make that the label wraps itself and do not go like in the picture ("Change Change Change..."):
I use "no more tables" here and always get that issue with longer labels - they just do not wrap. I understand that the white-space in css is "nowrap", but if I change it to "normal", everything goes wrong and displays badly. Maybe someone had an issue with this "no more tables" technique and word-wrapping?
More about this script can be fuonde here http://elvery.net/demo/responsive-tables/
That example uses absolute positioning to move the generated content to the start of the rows and is a flawed approach as that means that the content cannot wrap because it will overlap the content in the next row. That's why the nowrap rule is in place to stop this happening.
Instead of absolute positioning you could use display:inline-block instead and avoid the issue altogether.
In the code from here change these two rules as follows:
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
}
td:before {
display:inline-block;
vertical-align:top;
width: 45%;
padding:0 3% 0 1%;
}
Rough example here:
Updated code as per comments below:
td:before {
float:left;
width: 95%;
padding:0 0 0 1%;
margin-left:-100%;
}
td {
padding-left:50%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
You need to break the words if they are too long. You can make this in css as:
word-wrap:break-word;
Try it.
The main issue here has to do with sizing one HTML element based on another element. This is something that tables are optimized to do - calculating the height and width of TD elements across the entire table to a uniform size dynamically based on content.
By abandoning tables (via changing the display type of THEAD to "block", effectively making it nothing more than a DIV), you've lost this automatic resizing effect that browsers do for you, as evidenced here:
There's no getting around this. The "No More Tables" approach must make a compromise - use absolute height to mimic the way tables are laid out. You are trying to reintroduce this automatic size calculation, but you can't without restructuring your HTML.
If you want to continue to pursue this path, you'd need to "manually" handle resizing of the TD elements - iterate over the cells of the table and resize them yourself whenever the size of table might have changed. While possible, your Javascript won't be nearly as optimized as the browser and anything you implement yourself will likely be buggy and slow.
I'm afraid the only viable solution is to shorten your label names and accept the need for absolute sizing to get around the lack of dynamic sizing in non-TABLE elements.
One possible solution: show an abbreviated label and then show a longer name in a popup on hover or tap: Tooltips for mobile browsers
Problem: In one type of embedded styling "overflow:hidden" is working fine, and in another type of embedded styling it does not.
Here is the CSSDesk code (jsfiddle is not working as of this writing).
Background: In my project I have to use HUGE tables to show variables coming from a db - up to 75 variables per page. I tried my best using divs alone, but I wasted 20 hours and ultimately, I went back to tables (For you CSS purists, I apologize).
In some of my td's the data is a bit long, and needs to be "hidden" (it doesn't matter in this particular case because the data is just a "preview"). I've searched the web, and did an experiment in which the only styling element that could use "hidden" is a div (I tried tds and spans in an experiment and they don't work).
In one td, I'd like to put one variable on the left, and another on the right - most of the time, both will fit into the td, but on a very long variable it's OK to chop off part of the right variable. So, I write the CSS and html, and style the divs so that they meet my criteria - those are the upper two tds on the CSSDesk page noted above. Everything works fine.
BUT! Over the last few months I've learned that it's possible to "mix" multiple styles in the "class" part of the element identifier (e.g. <td class="redcolor blueunderline">) and I've found that on many occasions it is VERY convenient to use "little additions" on an element that is the only one on a page, and you'd have to rewrite/add a whole embedded style or change the style sheet (e.g. Name, address, phone number, zip and you only want to "bold" the name - class="identifers" vs class="identifiers bold") - I wonder if you experts ever do something like that?
So I played a bit and got most of it working EXCEPT for the "overflow:hidden".
For the upper left div in the CSSDesk example I use this CSS and html (it works great):
.leftdivclass {
float:left;
background-color:green;
color:black;
border:2px solid yellow;
overflow:hidden;
white-space:nowrap;
width:25%;}
<td><div class="leftdivclass" >Upper Left 123456789</div>
For the upper right div in the CSSDesk example I use this CSS and html (it works great):
.rightdivclass {
float:right;
background-color:red;
color:black;
border:2px solid yellow;
overflow:hidden;
white-space:nowrap;
width:25%;}
<div class="rightdivclass" >Upper Right 123456789</div></td>
For the lower left div in the CSSDesk example I use this CSS and html (everything works but the "hidden" - note the numbers sticking out)
.floatleft {
float:left;}
.bgblue {
background-color:blue;}
.bgred {
background-color:red;}
.lcwhite {
color:white;}
.lcblack {
color:black;}
.border2y {
border:2px solid yellow;}
overflowhidden {
overflow:hidden;}
.wsnowrap {
white-space:nowrap;}
.width25pc {
width:25%;}
<td><div class="floatleft bgblue lcblack border2y overflowhidden wsnowrap width25pc">Lower Left 123456789</div>
But if I use the same html and add "style="overflow:hidden" everything works fine, like in the lower right example of the CSSDesk example.
<div class="floatright bgred lcblack border2y overflowhidden wsnowrap width25pc" style="overflow:hidden;">Lower Right 123456789</div></td>
Questions:
Why would a single embedded css style containing "overflow:hidden" work, yet when it is parsed out to a single addition to a class command it doesn't work? And why would it work if I added "style="overflow:hidden" - inline?
Do you experts ever use little "class snippets" like this?
Again, I thank you in advance.
You can mix and match these classes. If it saves redundancy, great. If it confuses classes and container classes (i.e. the parents they are inside of) then it gets kind of hard to debug your problem.
Most likely it's not working because either its parent or another class is conflicted with the overflow property. Inline styles like style="overflow:hidden;" almost always get prioritized the highest, but remember that overflow has a default property of visible.
If you call 2 classes, one having overflow:hidden; and the other overflow:visible;, then there's a chance that you won't get your desired effect.
Keep in mind, too, that a selector like this
#divid .divclass
will always win over
.divclass
and will be treated with greater priority.
Also, have you tried
overflow:hidden !important;
which tends to take precedence over everything. Hope that helps.
I have a table with only two columns . i want to make first column is fixed and next column scrollable in all the rows..it should be horizontally scrollable as a whole .. not individual columns
There can be hundreds of rows. .
I have a demo code here in Jsfiddle
I dont have much exposure to css styling.
You could use CSS overflow:auto;, as in http://jsfiddle.net/Yw679/2/
If I understand correctly, you want the entire left column to be static, and the entire right column (including the header) to be horizontally scrollable. Is that correct?
If so, it's not possible with one table. But with a bit of extra code, it's possible with two tables like this: http://jsfiddle.net/Yw679/6/
What you're searching for is called "frozen columns".
See a jqGrid demo here that implements column freezing in version 4.3. It's quite a versatile grid plugin and definitely worth a try(if you haven't already, that is).
You could do something like this:
http://jsfiddle.net/Yw679/3/
th{
display :inline-block;
height: 50px;
width: 100px;
overflow: scroll;
}
th:first-child{
overflow: hidden;
}
I think you want to do something like this example
https://www.datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
It's better to use a single table along with two column fixed and other are scrollable.
Here is the link.