Normally, we have table TDs aligned left to right.
I have a html page for desktop and mobile. For mobile , TDs arranged left to right are not visible so I want to show them top to bottom.
Is there any property that can arrange TDs top to bottom if width is not sufficient?
use <tr> instead of <td>
tr is a row, you can fill it with td's
You can assign the as rows.
So if you want to show all data in new line then use for each
For Example
<tr>
<td>ABC</td>
<tr>
<tr>
<td>PQR</td>
<tr>
<tr>
<td>XYZ</td>
<tr>
Related
I have a table that I would like to start on exact left and top of screen, but it looks like there is a 1 pixel space to the left and top of it. Not sure why.
I've tried margins, borders, etc all to 0, but can't get rid of the pixels.
<table style="width:100%;height:100%;max-width:750px;max-height:1334px;">
<tr style="height:5%;background-color:#e31837">
<td align="center"></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr style="height:10%;background-color:#e31837">
<td align="center">
<table style="width:100%;color:white;font-size:26px;font-family:sans-serif">
<tr><td align="center"><p class="example"><b>TEXT</b></p></td>
</tr>
</table>
</td>
</tr>
</table>
I expect the table to start at the exact left and top of browser window area, but I can see the grey background 1 pixel left and top of the table.
It looks like I can't put the body style here but the style for that is all margins to 0 i.e. top, left, and the background color to grey... just to make sure it is part of the web page behind the table showing, not the browser adding some to the left and top for whatever reason.
This can be solved by setting border-collapse: collapse; on the table element. This prevents the browser from adding any additional padding between the borders of your table components (in this case, it was padding between the cell borders and the nonexistent table border), by merging borders for adjacent cells. You can see the difference visually in this diagram:
An alternate solution would be to set border-spacing: 0; on the table element. This will not combine borders from adjacent cells, but will still remove the padding between them:
(Originally posted as a comment to confirm it resolved the issue)
I'm using wicket and have a dynamic table. What I want to be able to do is have a fixed table border height that adds rows (max 5 per page), and it's row's width can grow dynamically so something like:
Column Headers
row1
row2
empty space
end of table
The only solution I can think of (Which probably isn't the best because I'm a novice at both wicket and html) is to have a div with a fixed height, and growable width. The div will provide the table's fixed boxed border, and the table itself will be inside this div, allowing it's rows to grow dynamically by wicket with a pageable view setting a max of 5 rows.
so far I have:
html:
<div class="tableCell">
<table border="1" BORDERCOLOR="#333">
<tr>
<th>SSA ID</th>
<th>Default Qualifier</th>
<th colspan="2">Property Name/Value</th>
<th>Description</th>
</tr>
<div wicket:id="SSAIDs">
<tr>
<td wicket:id="SSAID">test</td>
<td wicket:id="defaultQaulifier">test</td>
<td wicket:id="propertyName">test</td>
<td wicket:id="propertyValue">test</td>
<td class="width" wicket:id="description">test</td>
<td>Edit
 Delete
 View Roles
</td>
</tr>
</div><!-- end SSAID's div -->
and for CSS no matter what I try, I can get the height to be fixed but the width will always expand to the end of the page.. This div is currently inside of a container class..
If you don't know Wicket, that is fine.. I just need to know how to make the div that contains the table wrap its width, but have a fixed height.
is it possible to make <td colspan="2"> element have 2-column background? I mean that <td> has 100% width and the background would be red for 50% of width and blue for the rest 50%:
The reason I need this is because of my html markup:
<table>
<tr>
<td>One column text</td><td>One column text</td>
</tr>
<tr>
<td>One column text</td><td>One column text</td>
</tr>
<tr>
<td colspan="2">This text must flow through the whole table width (through 2 columns width)</td>
</tr>
<tr>
<td>One column text</td><td>One column text</td>
</tr>
</table>
I think that I can use image as a background but I would prefer some clean HTML/CSS solution...
In addition I can't use gradient background because IE cant show straight line between two colors, it can make only gradient from one color to another and this gradient needs 4 colors
Can you work with this as a base?
http://jsfiddle.net/MrLister/ggRHs/4/
I didn't style the table, so you can see what happens better. But it doesn't use colspan, so you can just color each individual table cell as you see fit.
I have an HTML table with two columns. For the last row, I want the following to happen:
There will be one cell that spans two columns. (colspan = "2") The width of this cell will not grow past the width of the table. Anytime text in that cell grows too large, I want it to span another row, but not increase the width of the table. The catch is, I want the width of the table to be fitted to be as large as it needs to be to contain the two columns without expanding to another row (excluding the last row).
EDIT: What I have that doesn't work. The problem is that if "really long text" gets too long then it expands the other "text" messages instead of adding new rows.
<table>
<tr><td>text</td><td>text</td></tr>
<tr><td colspan="2">really long text</td></tr>
</table>
You need to style you're TD with "word-wrap: break-word;" and set a max width for the table or TD.
<table><tbody>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td colspan="2" style="max-width:40px; word-wrap: break-word;">really long textsadfadfadfadfadfadsfadfadsfadfadsfasdfasdfasdfasdfasdfasdfasdfasdfa</td>
</tr>
</tbody></table>
This will generate the table like this (without borders), the last rows just increases in height if the text is longer then it fits in width:
on your last row, wrap the content in a div and give it a width, like 100%, this way it wont increase the width of the table but just wrap around.
<td colspan="2">
<div style="width:100%"> The content here</div>
</td>
Since you tagged this question html and css i have to tell you that if you want the content to dynamically create a new row, you will have to use javascript. It's not possible without script, at least not that i know of.
I am trying to fix a display issue we are having with some tables (nested). In short, we show a page listing products. Each product is displayed in it's own table. And each of these is nested in a larger table to layout the page. Unfortunately, some of the inner tables have slightly more content than others and they end up being different sizes, causing others not to fill the containing cell.
For example:
<table style="height:500px; background:blue;">
<tr>
<td style="vertical-align: top">
<table style="background:red; height: 100%;">
<tr>
<td>hello</td>
</tr>
</table>
</td>
</tr>
</table>
In quirks mode, the red table, fills the blue table, so you basically see a red table, with a blue border.
In standards mode however, the inner table does not expand to fill the blue table. Causing the layout to be not at all as anticipated.
How can I fix this behavior? I don't want to render in quirks, as that will end up creating a maintenance nightmare.
Put style="height: 100%;" on the <td> and <tr> tags. Setting height to 100% needs every parent to have a defined height.
Instead of setting the height of the outer table, set the height of the <td> and style="height: 100%;" on the nested table.