I am on IE9+ and Firefox/Chrome latest.
http://codepen.io/helloworld/pen/wmuGH
How can I put a margin between all columns that the table looks like a diagram?
I do not want to use an empty dummy column between the real ones and set their width to fake the margin.
I have played a lot with padding and margin but either the rounded border at top is broken or the background-color of the diagram columns are floating into the new created gap between the columns...
UPDATE:
There should be no gap between the rows.
Just like this:
Try this:
#responseTable {
border-collapse:separate;
border-spacing: 4px;
}
http://jsfiddle.net/qLumE/
Related
I have a table with two columns. The left side us usually 1 word, and the second one with a bit more text. When I have too much text on the second column, the first one expands and center the text.
How do I remove this unwanted padding so the text will be on the top-left?
add css in td or in .tlt vertical-align:top
Inside a table-row, the two cells have always the same height. It shows as a padding, but it's automatically applied.
As some users mentioned, you can set a vertical-align: top; for the cell, and than play with padding top to position the text.
in ALL browsers, the browser will make padding and margin between all the things. to remove that and control the page yourself add this add the first line of your css:
* {margin:0 auto; padding:0}
auto makes all the things (except text and images) at the center of your page.
and for your table if you want texts to be on top of your td, add this:
.tlt{vartical-align:top; text-align:left;}
Just Select your Class via .tlt and add vertical-align:top you don't need to do anything more since for your .tlt just padding-right has been added so that there will be a space between two columns.
CSS
.tlt{
vertical-align:top;
}
Add it at the end of your Css Code.
I'm trying to make a basic A4 document in HTML using mm CSS sizing. The document is sized perfectly - it prints fine on A4, covering virtually the full page, leaving a nice 3mm margin around it. I'm using a table for the layout, as the original document (that i'm re-creating in HTML) was created in Excel, and therefore has a table structure.
As I need the table to have an exact 3mm margin, i'm setting the width and height in mm, and using absolute positioning (3mm top and left). I had originally created the table-like layout using divs - but making the lines overlap perfectly using this is extremely fiddly - you can't really do it properly, as you're working with a mixture of millimetres and pixels, hence my choice for using a table.
The table displays perfectly, all rows uniformly fill the document. Some of the rows need to be split, so I chose to use floated divs within the s, within the s.
Despite resetting the CSS, and setting the <tr>s padding to 0, and the <td>s padding to 0, and giving the table border-collapse: collapse; and border-spacing: 0;, there's an annoying little margin between the div, that even Chrome can't explain why it's there:
https://www.dropbox.com/s/qt1n54m9fxxl6f2/job_sheet_template.html
You may need to open the image link, and zoom in, to see the green highlighted space below the divs (which is apparently the <td>s padding). In the bottom, right hand corner, you can see that the padding isnt set?
Why is this here?
Your image shows that border collapse isn't being applied. Try using:
table {
border-collapse: collapse !important;
}
I've fixed the problem -
The padding isn't set, but somehow setting the divs height to 100% doesn't work - I've now set it to 5.4mm which fits perfectly.
for html
html
{
font-size:0;
}
How do I make my table spacing slightly better so the words aren't on top of each other like in this screenshot:
I'm just using generic table HTML coding. Tried spacing and padding with the tr tag.
Its not problem with table spacing, you need to increase line-height for your text.
This is a screenshot of a table in Chrome 5.
The same table rendered in IE8:
You can view the page here:
http://labs.pieterdedecker.be/vspwpg/?page_id=96
This CSS rule adds the padding that IE8 won't respect:
td#content table.subitems { padding: 5px; }
Try adding the padding to the td/th elements under the table, not the table itself. The table cells / headings get zeroed out by *{margin:0;padding:0;} as well, so you have to explicitly specify.
Edit: If you don't mean to put padding on every table cell/heading then try a margin on the table or padding on a table wrapper div.
I ran into the same problem with my site. The class was applied to the <td> tag but its padding was not showing up. Then I declared the padding inline, and it showed up fine. I nearly put a fist through my monitor, but when I realized that would hurt me and not IE, I refrained. It's not pretty, but it works.
<td class="doesntMatterBecauseIEHatesYou" style="padding:10px;">Horray, IE doesn't hate you anymore. But you still hate IE.</td>
I have an HTML table of tickets listings (e.g. http://seatgeek.com/event/show/23634/buffalo-bills-vs-tennessee-titans/). I'd like to highlight certain rows with a 2px border. The problem is that this is bleeding into adjacent cells and covering up other borders.
For example, I have a 1px bottom border on the first row of cells (to designate that it's a header). If I try applying a 2px border to the second row, then it covers up border in the first.
My first reaction was to set a margin for the troublesome, but I've been hunting around for a solution, and it looks like that's not possible. Is there another solution?
It sure looks like its the border collapse that is the problem here. If you remove the
table {
border-collapse:collapse;
}
you will get what you're looking for.
You might be having box model crossover. http://www.w3.org/TR/CSS2/box.html
for every px or border added you will need to remove equivalent padding or width. if 1px to left and right then 2px from width.
If this is not he case you may need to add margin to the tr.