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?
Related
I've got a table row which has 3 columns now. text text image(with cellspan=2 and rowspan=2)
How can I remove that padding from the right inside the td.
Basically I want to push the image to the left.
img is inside td too
the problem here is, Verticle- align try to change the values as you wanted
example code
vertical-align:baseline;
assigned generally applies to common html elements. with this change, Now everything works as supposed to.
If you want to effect the entire table, you can remove explicit width from all <td>s, and then the text will take as much space as it actually needs.
If you want to effect only one row, you can put the text and the image inside the same <td colspan=2> instead of two separate <td>s
How to create the one-row table, that has fixed TR height (the limit is two rows), but each TD has flexible width and forced word-wrapping.
The main question: is it possible to force each TD to use always the complete height (use two rows) when there is more then one word, i. e. if TD contains one word it should be displayed in one row, if TD contains more then one word it should be displayed in two rows (in this case browser should set the TD width automatically).
This appears to be impossible. The table layout mechanism tries to avoid line breaks inside cells when there is enough horizontal space. By setting e.g. width: 0 on the cells, you could override this so that the browser makes each cell as narrow as possible (effectively, as wide as the widest word, in the case of pure text content), but then e.g. three words make three lines, causing the height setting to be overridden.
If you specify the context and purpose of wanting such a layout, perhaps a new, solvable problem can be formulated.
I am having problems putting a box-shadow on trs inside a table. The problem is that the box-shadow doesn't show up at all unless the display of all the trs of the table is set to block (a 'fix' I found here: Box Shadow inside TR tag). However, when the display of trs is set to block, it makes the table cells no longer line up, crowding all to the left.
Here's a fiddle demonstrating the problem: http://jsfiddle.net/jFdEY/
You can try changing it to apply to all trs but that causes another problem (in the second picture below).
Here's some pictures:
The one without display: block on all the trs (table displays properly but box-shadow doesn't work)
The one with display: block on all the trs (box-shadow shows up but the table layout is broken)
So, is there a way around this?
"Many of the elements used within tables are neither block nor inline elements."
For this reason setting all TR to block is most likely breaking the natural table behavior.
EDIT: I was able to create a solution similar to your desired effect however it requires that the columns have fixed width.
Demo: http://jsfiddle.net/jFdEY/2/
Technically this isn't a table anymore though, just appears as such.
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
I have a table in a HTML form. It has a fixed height for optical reasons. The number of rows in the table varies depending on the number of form fields available.
Problem: If there are very few rows, all rows are stretched vertically, increasing the space between input elements.
I could avoid this by giving the data rows a (fake) fixed height. I don't like that approach because there is no fixed height I could give it (relative font sizes, accessibility) and I fear future problems - say for example that IE9 decides to take cell heights literally.
What can I do?
I have a last (empty) row but no idea what to put in there so that it automatically occupies all "available" space.
Put heightless table in a div with a fixed height which mimics the table (border? bgcolor?).
By the way, just doing tbody { display: inline; } instead of an empty row works in all real browsers. No, not in MSIE. The tbody element has a lot of shortcomings in MSIE. It also lacks the ability to overflow: scroll; which would be great to have a scrollable table with a fixed header.
Couldn't you set the cell height to 100% for the last empty row, this should presumably cause that last row to take up the rest of the fixed space
I guess this is not doable.
Yeah, table based websites are beyond ages, however you would still need tables to display data. In fact I have to agree with Pekka that this is not doable on the table cell itself, but there is something we can fashion:
Try wrapping the data inside the td cell into a div and style that div to the height you want and set its overflow property to hidden.