I am new to coding and I am using a table with a border of 0 to format my page. How do I make the gaps between cells smaller.
With the border-spacing property (or the border-collapse property if you want to remove them entirely).
Note also that cells may have padding, that you might wish to set to zero (as space between the content and edge of a cell can look like space between cells if there isn't a border present).
Try cellspacing and cellpadding
http://www.htmlcodetutorial.com/tables/index_famsupp_29.html
Related
I have problem in which I have some rows which I want there to be a uniform background color but not all rows have a equal number of td elements so there are some which are longer then others and the shorter ones thusly end up with empty space. This is ok except the empty space, even when CSS style background-color is applied to the tr element, has no background. How can I apply background to an entire table row, including empty space?
You're not doing it right if you're not accounting for a uniform number of columns across each row. Either make use of colspan or add the appropriate cells.
Put the td element in there and you'll be fine. Is there a reason you need to leave it out?
I have a complex tree-like table layout (few cells on the left, many on the right), and I want to make certain cells (and their rows) vanish completely (with Javascript, based on class).
visibility:hidden just makes the contents invisible, and setting the text-size and border of the cells makes them small, but I'm stuck with a few pixels left. I've tried line-height:0, padding:0 border-spacing:0, but the cells are still taking up about two pixels, with another two pixels vertically between them.
Does someone have a list of the css attributes which have to be zero to get a cell to disappear completely?
Use the CSS display property:
style="display: none;"
If that doesn't work wrap the content in a <span> and use it on that instead
Basically the problem I have is that in Safari/Chrome it is changing the width of my columns even though I have specified a) a width on the table, b) table-layout:fixed, and c) specific widths on my first row that when added with the padding and border values add up to the width of the table specified. In IE7 and Firefox 3 the table is rendered the same. But in Safari/Chrome it decides to make the second column bigger by taking space from the other columns.
Any ideas? I have a very simple sample page that you can look at, as well as an image showing how the table is rendered in all three browsers for comparison.
In buggy webkits, table-layout: fixed also gives your table cells box-sizing: border-box. One alternative to browser detection is explicitly set box-sizing: border-box to get consistent behavior across browsers, then adjust your widths and heights accordingly (widths and heights must be increased to include padding and borders).
#my-table td {
box-sizing: border-box;
}
I was able to get around this problem by removing the padding from the <th> with the fixed width. You can then safely add padding to the <td>
After looking around, I think that this is caused by the following webkit bugs: 13339 and 18565. Basically a problem with how it uses the border and padding values in calculating the final width of the columns.
I ended up doing some browser-sniffing and setting some different css values based on that for webkit browsers so that the final rendering was the same as FF and IE.
Have you tried loading some Reset CSS?
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
I made a Kendo grid have table:fixed-width. All the columns disappeared but only in Safari. Upon inspection, the td elements all have a computed style width of -3px. If I remove table:fixed-width, it's fine. If I specify custom pixel widths (but not percentages), it's fine. If I disable every style applied from every css source I can find (in the console style tab), the problem is not fixed it and nothing there sets width -3px.
So I have to either set all the column pixel widths or else not use table:fixed-width.
How can you enforce the minimum width for a TD that can optionally contain an image? I ask this because I'm using a Javascript chess widget but when there are no pieces in any of the squares of a particular column, regardless of the width style of the td's being set to 36px, this column renders much narrower than those that have at least one row that contains the image of a chess piece.
Note that all the style is being set directly on each td cell. I read somewhere that a possible solution would be to instead create a div inside the td and set the width on that. Am hoping to avoid that as it might require significant modification to the underlying Javascript library. I've tried specifying !important along with the width but it had no effect.
Using firebug I can modify the width attribute but it seems the numbers are incorrect. For instance I can decrease the width all the way to 0 and it still appears the same. Or I can set the width to more than 36 and it appears to grow by width-36, but if for instance I set both the height and width of one of these narrow cells to the same number, lets say 60px, the height of what gets displayed is greater than the width and it appears as a rectangle not a square.
Furthermore not only can the td optionally contain an image, but each square specifies a background image too. So I am at a loss :( Thanks in advance
When I alter the CSS in your file using Firebug or the JS inspector in Chrome, setting the min-width property instead of the width property does the trick. Might want to try that? Not sure how IE will like that, though.
BTW: Why not use classes to do the CSS? It's kinda horrible to debug, this way.
By default tables will auto-size their columns.
If you set the table style to include:
table-layout: fixed;
then you'll have much better control of it via css and attributes.
You can use the td tags width attribute or you could use css and set the width.
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.