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/
Related
I have a website with a table and for some reason that I cannot find for the love of god, the last item of the table row is wider than previous items. Here is a link to see what I mean. However, it only does that on some pages. Most pages are completely fine. Here is an example of what its supposed to look like this.
The code is the same on every page and I do not quite understand why it does that because the 'inspect element' gives me that the width of the table element is the same. However, it clearly is not. Please check it out and let me know where to start looking.
The below content in one of the bottom rows is causing the issue -
СК-201(М),231(М),251(М),351(М),501(М)
Its in the 5th row from bottom.
Add space after comma to solve the issue.
some time data come from data store and you cant hanld this with adding space in the table when long words comes in then td width should extend its simple to solve this issue in css add this line for you td css
word-break: break-all;
your css will be look like
.catalog_items_blocks td {
padding: 10px 0 38px 41px;
width: 179px;
word-break: break-all;
}
now words breaks when cross the td width
thanks
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/
Not a Drupal question, but probably a CSS/HTML question:
I have written a module for Drupal 7 with Bartik theme, which displays a button "Show". When clicked it will fetch JSON data from a PHP script and generate a HTML table as string and finally display that table inside (or instead?) of a <div id="top"></div>
This whole complex stuff (at least for me) works surprisingly fine:
However I have this minor cosmetic problem: I can not get rid of the fine white line between the tabel cells.
I've added <table border="0" cellspacing="0" inline - this doesn't help.
I've added an id to the table <table id="last" and CSS-code:
#last {
border:0;
cell-spacing:0;
}
but this doesn't work either.
When I inspect in Mozilla Firebug or Chrome dev. console - those attributes are there.
Also, I have a non-Drupal page too - it doesn't show those ugly lines.
Any ideas please?
I've read, there are CSS stylesheets, which supposedly reset everything, but they are probably overkill for my problem.
My jsFiddle code works too, but doesn't have the ugly white lines...
I'm not posting the URLs of the above mentioned pages, because they both are in Russian and require registration.
There does not seem to be any code or URL that actually demonstrates the problem, but you could use the brute-force method of adding the following into the stylesheet:
td { border: none !important; }
It sounds like the problem is caused by some CSS code setting a border on the cells, overriding whatever you might set at the table level.
If this does not help, we at least know that the problem is caused by something else than the table and cell elements (perhaps some elements inside the cells?).
It it does help, inspect the td cells to see what is now causing the borders, and write a stylesheet that is sufficient to override that (or edit the settings that cause the borders).
Try giving this:
table {border-collapse: separate;}
I have been given a small task but I'm not able to complete it any way I try. I was asked to code this calendar widget that I designed in HTML and CSS but I'm not sure of the tables or divs that I'll have to be using!
This is how the calendar is supposed to look like:
This is how I've designed it for now:
The live demo of the site can be found here, as well as the code to what I've done: http://trendgfx.com/projects/comet-tavern/
Please help me.
If you get rid of the float:left and display:inline-block on the #archive-calender th { and #archive-calender td { you get a lot closer.
Next up you'll want to set border-collapse to separate on #archive-calender { and throw in some border-spacing:3px to get the gaps between the cells
Finally, a bit of padding:2px on the #archive-calender td { will give you some breathing room inside the cells.
HTH
edit forgot the background on the cells.
Add either some background-color or background-image to #archive-calender td { and you'll get the nice grey cells.
I would like to create a table with a scrollable body. I'll have my header row, then the data that will scroll while the header is fixed. This is kind of like freezing panes in excel. I tried creating a table above the content I want to scroll, but the column widths don't match up. It looks to me that everything has to be in one table for all the columns to match up. What's the best way to do this?
I set up a fiddle to show what I'm trying to do. I tried a whole bunch of things to make this work, but never got it to come out right.
http://www.jsfiddle.net/polyhedron/pzbmS/2/
Everything seems to look fine to me - assuming that I understand you correctly.
Edit : Sorry - I am sure you looking for an alternatives. These might help
Pure CSS Scrollable Tables
Another similar link...
Here's a quick and dirty jsFiddle I made - it only uses 1 row as you mentioned.
jsFiddle
I had a project where I needed the same behavior. Here is what I came up with:
http://blog.bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/
Here is a demo page of the end result:
http://bobcravens.com/demos/FixedHeaderTable/index.html
Hope this gets you started. Let me know if you have questions.
Bob
Add a text-align: left to thead tr element:
thead tr
{
text-align: left;
}